{"id":51502,"date":"2026-08-04T20:18:35","date_gmt":"2026-08-04T12:18:35","guid":{"rendered":"https:\/\/www.modbus.cn\/51502.html"},"modified":"2026-08-04T20:18:35","modified_gmt":"2026-08-04T12:18:35","slug":"visualhmi-%e7%94%bb%e5%9b%be%ef%bc%9aon_draw-redraw-%e7%bb%98%e5%9b%be-api-%e4%b8%8e%e5%88%86%e5%b1%82%e7%bb%98%e5%88%b6","status":"publish","type":"post","link":"http:\/\/www.modbus.cn\/en\/51502.html","title":{"rendered":"VisualHMI \u753b\u56fe\uff1aon_draw\/redraw\/\u7ed8\u56fe API \u4e0e\u5206\u5c42\u7ed8\u5236"},"content":{"rendered":"<p>on_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<strong>\u5fc5\u987b\u5728 on_draw \u5185\u8c03\u7528\u624d\u751f\u6548<\/strong>\u3002\u8fd9\u7bc7\u8bb2\u7ed8\u56fe API \u548c\u5206\u5c42\u7ed8\u5236\u673a\u5236\u3002<\/p>\n<h2>1. on_draw \u89e6\u53d1\u65f6\u673a<\/h2>\n<p>on_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<\/p>\n<ul>\n<li>\u52a8\u6001\u5143\u7d20\uff08\u52a8\u753b\/\u89c6\u9891\/RTC\uff09\u5237\u65b0<\/li>\n<li>\u89e6\u6478\/\u64cd\u4f5c\u5c4f\u5e55\u63a7\u4ef6<\/li>\n<li>set_xxx \u66f4\u65b0\u63a7\u4ef6\u5c5e\u6027<\/li>\n<li>\u4e32\u53e3\/LUA \u4fee\u6539\u5bc4\u5b58\u5668\u6539\u53d8\u63a7\u4ef6\u72b6\u6001<\/li>\n<li>\u4e3b\u52a8\u8c03\u7528 redraw()<\/li>\n<\/ul>\n<p><strong>\u63a7\u4ef6 ID \u5fc5\u987b \u2260 0<\/strong>\uff0c\u5426\u5219\u81ea\u7ed8\u65e0\u6548\u3002<\/p>\n<p style=\"text-align:center\"><img decoding=\"async\" src=\"https:\/\/www.modbus.cn\/wp-content\/uploads\/2026\/08\/visualhmi\/lu006_1.png\" style=\"max-width:100%;border:1px solid #eee;margin:8px 0\" loading=\"lazy\" title=\"VisualHMI \u753b\u56fe\uff1aon_draw\/redraw\/\u7ed8\u56fe API \u4e0e\u5206\u5c42\u7ed8\u5236\u63d2\u56fe\" alt=\"VisualHMI \u753b\u56fe\uff1aon_draw\/redraw\/\u7ed8\u56fe API \u4e0e\u5206\u5c42\u7ed8\u5236\u63d2\u56fe\" \/><\/p>\n<h2>2. \u7ed8\u56fe API<\/h2>\n<table border=\"1\" cellpadding=\"6\" style=\"border-collapse:collapse;font-size:14px\">\n<tr>\n<th>\u51fd\u6570<\/th>\n<th>\u8bf4\u660e<\/th>\n<\/tr>\n<tr>\n<td>set_pen_color(color)<\/td>\n<td>\u8bbe\u7f6e\u753b\u7b14\u989c\u8272\uff08RGB565\uff09\uff1a\u7ea20xF800\/\u7eff0x07E0\/\u84dd0x001F\/\u767d0xFFFF\/\u9ed10x0000<\/td>\n<\/tr>\n<tr>\n<td>draw_line(x0,y0,x1,y1,width)<\/td>\n<td>\u753b\u7ebf\u6bb5\uff0cwidth 1~10<\/td>\n<\/tr>\n<tr>\n<td>draw_rect(x0,y0,x1,y1,fill)<\/td>\n<td>\u753b\u77e9\u5f62\uff0cfill=1 \u586b\u5145\/0 \u8fb9\u6846<\/td>\n<\/tr>\n<tr>\n<td>draw_rect_alpha(x0,y0,x1,y1,alpha)<\/td>\n<td>\u534a\u900f\u660e\u5b9e\u5fc3\u77e9\u5f62\uff08\u906e\u7f69\u5c42\uff09<\/td>\n<\/tr>\n<tr>\n<td>draw_circle(x,y,r,fill)<\/td>\n<td>\u753b\u5706<\/td>\n<\/tr>\n<tr>\n<td>draw_ellipse(x0,y0,x1,y1,fill)<\/td>\n<td>\u753b\u692d\u5706<\/td>\n<\/tr>\n<tr>\n<td>draw_text(x,y,text,font,color)<\/td>\n<td>\u753b\u6587\u5b57<\/td>\n<\/tr>\n<tr>\n<td>draw_surface(surface,x,y,w,h,sx,sy)<\/td>\n<td>\u8d34\u56fe\uff08\u53ef\u88c1\u526a\u6e90\u533a\u57df\uff09<\/td>\n<\/tr>\n<tr>\n<td>redraw()<\/td>\n<td>\u5168\u5c40\u91cd\u7ed8\uff0c\u5f3a\u5236\u6240\u6709\u81ea\u7ed8\u63a7\u4ef6\u6267\u884c on_draw<\/td>\n<\/tr>\n<\/table>\n<p style=\"text-align:center\"><img decoding=\"async\" src=\"https:\/\/www.modbus.cn\/wp-content\/uploads\/2026\/08\/visualhmi\/lu006_2.png\" style=\"max-width:100%;border:1px solid #eee;margin:8px 0\" loading=\"lazy\" title=\"VisualHMI \u753b\u56fe\uff1aon_draw\/redraw\/\u7ed8\u56fe API \u4e0e\u5206\u5c42\u7ed8\u5236\u63d2\u56fe1\" alt=\"VisualHMI \u753b\u56fe\uff1aon_draw\/redraw\/\u7ed8\u56fe API \u4e0e\u5206\u5c42\u7ed8\u5236\u63d2\u56fe1\" \/><\/p>\n<h2>3. \u5206\u5c42\u7ed8\u5236\u6848\u4f8b<\/h2>\n<p>\u4e24\u4e2a\u77e9\u5f62\u63a7\u4ef6\u53e0\u653e\uff1aID=10 \u84dd\u8272\u77e9\u5f62\uff08\u4e0b\u56fe\uff09\u753b&#8221;\u6c34\u679c&#8221;\u3001ID=11 \u9ec4\u8272\u77e9\u5f62\uff08\u4e0a\u56fe\uff09\u753b&#8221;\u5c0f\u5c9b&#8221;\uff0c\u7528 draw_surface \u88c1\u526a\u663e\u793a\uff1a<\/p>\n<pre style=\"background:#f5f5f5;padding:10px;border-radius:4px\">function 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<\/pre>\n<p>control_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<\/p>\n<p style=\"text-align:center\"><img decoding=\"async\" src=\"https:\/\/www.modbus.cn\/wp-content\/uploads\/2026\/08\/visualhmi\/lu006_3.png\" style=\"max-width:100%;border:1px solid #eee;margin:8px 0\" loading=\"lazy\" title=\"VisualHMI \u753b\u56fe\uff1aon_draw\/redraw\/\u7ed8\u56fe API \u4e0e\u5206\u5c42\u7ed8\u5236\u63d2\u56fe2\" alt=\"VisualHMI \u753b\u56fe\uff1aon_draw\/redraw\/\u7ed8\u56fe API \u4e0e\u5206\u5c42\u7ed8\u5236\u63d2\u56fe2\" \/><\/p>\n<div class=\"tip\" style=\"border-left:4px solid #f7941e;padding:10px 14px;background:#fff8ef;margin:14px 0\">\u753b\u56fe\u4e09\u5751\uff1a<strong>\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<\/strong>\u3002<\/div>\n<p style=\"color:#888;font-size:13px\">\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<\/p>\n<span id=\"magicpostMarker\"><\/span>","protected":false},"excerpt":{"rendered":"<p>on_draw \u662f\u63a7\u4ef6\u7ea7\u81ea\u7ed8\u56de\u8c03\uff1a\u5728\u753b\u9762\u63a7\u4ef6\u4e0a\u52a8\u6001\u753b\u7ebf\u3001\u77e9\u5f62&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[3131,3126],"tags":[3334,3335,3332,3333,3336,3134,3331],"class_list":["post-51502","post","type-post","status-publish","format-standard","hentry","category-hmi-lua","category-hmi-dev","tag-draw_line","tag-draw_rect","tag-on_draw","tag-redraw","tag-rgb565","tag-visualhmi","tag-3331"],"_links":{"self":[{"href":"http:\/\/www.modbus.cn\/en\/wp-json\/wp\/v2\/posts\/51502","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.modbus.cn\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.modbus.cn\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.modbus.cn\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.modbus.cn\/en\/wp-json\/wp\/v2\/comments?post=51502"}],"version-history":[{"count":0,"href":"http:\/\/www.modbus.cn\/en\/wp-json\/wp\/v2\/posts\/51502\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.modbus.cn\/en\/wp-json\/wp\/v2\/media?parent=51502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.modbus.cn\/en\/wp-json\/wp\/v2\/categories?post=51502"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.modbus.cn\/en\/wp-json\/wp\/v2\/tags?post=51502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}