"# VisualHMI \u753b\u56fe\uff1aon_draw\/redraw\/\u7ed8\u56fe API \u4e0e\u5206\u5c42\u7ed8\u5236\n\n> 2026-08-04 | 2026-08-04\n> http:\/\/www.modbus.cn\/en\/51502.html\n\n**LUA \u811a\u672c, \u4e32\u53e3\u5c4f\/HMI \u5f00\u53d1**\n\n---\n\non_draw \u662f\u63a7\u4ef6\u7ea7\u81ea\u7ed8\u56de\u8c03\uff1a\u5728\u753b\u9762\u63a7\u4ef6\u4e0a\u52a8\u6001\u753b\u7ebf\u3001\u77e9\u5f62\u3001\u5706\u3001\u6587\u5b57\u3001\u8d34\u56fe\u3002\u6240\u6709 draw_xxx \u6307\u4ee4**\u5fc5\u987b\u5728 on_draw \u5185\u8c03\u7528\u624d\u751f\u6548**\u3002\u8fd9\u7bc7\u8bb2\u7ed8\u56fe API \u548c\u5206\u5c42\u7ed8\u5236\u673a\u5236\u3002\n\n## 1. on_draw \u89e6\u53d1\u65f6\u673a\n\non_draw(screen_id, control_id)\uff1a\u7cfb\u7edf\u6309\u63a7\u4ef6 Z \u8f74\u987a\u5e8f\uff08\u754c\u9762\u7f16\u8f91\u5668\u53e0\u653e\u987a\u5e8f\uff09\u4f5c\u4e3a\u56fe\u5c42\u7ba1\u7406\uff0c\u5bf9\u6bcf\u4e2a\u53ef\u91cd\u7ed8\u63a7\u4ef6\u72ec\u7acb\u89e6\u53d1\u3002\u89e6\u53d1\u6761\u4ef6\uff1a\n\n- \u52a8\u6001\u5143\u7d20\uff08\u52a8\u753b\/\u89c6\u9891\/RTC\uff09\u5237\u65b0- \u89e6\u6478\/\u64cd\u4f5c\u5c4f\u5e55\u63a7\u4ef6- set_xxx \u66f4\u65b0\u63a7\u4ef6\u5c5e\u6027- \u4e32\u53e3\/LUA \u4fee\u6539\u5bc4\u5b58\u5668\u6539\u53d8\u63a7\u4ef6\u72b6\u6001- \u4e3b\u52a8\u8c03\u7528 redraw()\n\n**\u63a7\u4ef6 ID \u5fc5\u987b \u2260 0**\uff0c\u5426\u5219\u81ea\u7ed8\u65e0\u6548\u3002\n\n![on_draw\u56fe\u5c42](https:\/\/www.modbus.cn\/wp-content\/uploads\/2026\/08\/visualhmi\/lu006_1.png)\n\n## 2. \u7ed8\u56fe API\n\n\u51fd\u6570\u8bf4\u660eset_pen_color(color)\u8bbe\u7f6e\u753b\u7b14\u989c\u8272\uff08RGB565\uff09\uff1a\u7ea20xF800\/\u7eff0x07E0\/\u84dd0x001F\/\u767d0xFFFF\/\u9ed10x0000draw_line(x0,y0,x1,y1,width)\u753b\u7ebf\u6bb5\uff0cwidth 1~10draw_rect(x0,y0,x1,y1,fill)\u753b\u77e9\u5f62\uff0cfill=1 \u586b\u5145\/0 \u8fb9\u6846draw_rect_alpha(x0,y0,x1,y1,alpha)\u534a\u900f\u660e\u5b9e\u5fc3\u77e9\u5f62\uff08\u906e\u7f69\u5c42\uff09draw_circle(x,y,r,fill)\u753b\u5706draw_ellipse(x0,y0,x1,y1,fill)\u753b\u692d\u5706draw_text(x,y,text,font,color)\u753b\u6587\u5b57draw_surface(surface,x,y,w,h,sx,sy)\u8d34\u56fe\uff08\u53ef\u88c1\u526a\u6e90\u533a\u57df\uff09redraw()\u5168\u5c40\u91cd\u7ed8\uff0c\u5f3a\u5236\u6240\u6709\u81ea\u7ed8\u63a7\u4ef6\u6267\u884c on_draw\n\n![\u7ed8\u56feAPI](https:\/\/www.modbus.cn\/wp-content\/uploads\/2026\/08\/visualhmi\/lu006_2.png)\n\n## 3. \u5206\u5c42\u7ed8\u5236\u6848\u4f8b\n\n\u4e24\u4e2a\u77e9\u5f62\u63a7\u4ef6\u53e0\u653e\uff1aID=10 \u84dd\u8272\u77e9\u5f62\uff08\u4e0b\u56fe\uff09\u753b\"\u6c34\u679c\"\u3001ID=11 \u9ec4\u8272\u77e9\u5f62\uff08\u4e0a\u56fe\uff09\u753b\"\u5c0f\u5c9b\"\uff0c\u7528 draw_surface \u88c1\u526a\u663e\u793a\uff1a\n\n```\nfunction on_draw(screen_id, control_id)\n  if control_id == 10 then\n    set_pen_color(0x001F)  -- \u84dd\u8272\n    draw_rect(0, 0, 800, 480, 1)\n    draw_surface(surface[1], 293, 88, 222, 353, 0, 0)\n  elseif control_id == 11 then\n    set_pen_color(0xFFE0)  -- \u9ec4\u8272\n    draw_rect(0, 0, 800, 480, 1)\n    draw_surface(surface[2], 293, 88, 222, 353, 0, 0)\n  end\nend\n```\n\ncontrol_id \u5224\u65ad\u51b3\u5b9a\u753b\u5230\u54ea\u4e2a\u56fe\u5c42\u2014\u2014\u754c\u9762\u7f16\u8f91\u5668\u91cc\u53e0\u653e\u987a\u5e8f\u5c31\u662f Z \u8f74\uff0c\u4e0a\u5c42\u7684\u63a7\u4ef6\u540e\u7ed8\u5236\u3001\u76d6\u4f4f\u4e0b\u5c42\u3002\n\n![\u5206\u5c42\u7ed8\u5236\u6548\u679c](https:\/\/www.modbus.cn\/wp-content\/uploads\/2026\/08\/visualhmi\/lu006_3.png)\n\n\u753b\u56fe\u4e09\u5751\uff1a**\u2460draw_xxx \u53ea\u80fd\u5728 on_draw \u91cc\u8c03\u7528\uff0c\u522b\u5728 on_run\/on_update \u91cc\u753b\uff1b\u2461\u63a7\u4ef6 ID \u4e3a 0 \u4e0d\u81ea\u7ed8\uff1b\u2462RGB565 \u662f 16 \u4f4d\u8272\uff085-6-5\uff09\uff0c\u7528 RGB888 \u503c\u76f4\u63a5\u4f20\u4f1a\u504f\u8272**\u3002\n\n\u6574\u7406\u81ea \u5e7f\u5dde\u5927\u5f69\u79d1\u6280 VisualHMI \u5f00\u53d1\u6587\u6863\uff08hmi-doc.gz-dc.com\uff09LUA \u6559\u7a0b\u300c\u753b\u56fe\u300d\uff0c\u7248\u6743\u5f52\u5927\u5f69\u79d1\u6280\u6240\u6709\u3002\n\n---\n*modbus.cn*\n"