on_draw 是控件级自绘回调：在画面控件上动态画线、矩形、圆、文字、贴图。所有 draw_xxx 指令必须在 on_draw 内调用才生效。这篇讲绘图 API 和分层绘制机制。
1. on_draw 触发时机
on_draw(screen_id, control_id)：系统按控件 Z 轴顺序（界面编辑器叠放顺序）作为图层管理，对每个可重绘控件独立触发。触发条件：
- 动态元素（动画/视频/RTC）刷新
- 触摸/操作屏幕控件
- set_xxx 更新控件属性
- 串口/LUA 修改寄存器改变控件状态
- 主动调用 redraw()
控件 ID 必须 ≠ 0，否则自绘无效。
2. 绘图 API
| 函数 | 说明 |
|---|---|
| set_pen_color(color) | 设置画笔颜色（RGB565）：红0xF800/绿0x07E0/蓝0x001F/白0xFFFF/黑0x0000 |
| draw_line(x0,y0,x1,y1,width) | 画线段，width 1~10 |
| draw_rect(x0,y0,x1,y1,fill) | 画矩形，fill=1 填充/0 边框 |
| draw_rect_alpha(x0,y0,x1,y1,alpha) | 半透明实心矩形（遮罩层） |
| draw_circle(x,y,r,fill) | 画圆 |
| draw_ellipse(x0,y0,x1,y1,fill) | 画椭圆 |
| draw_text(x,y,text,font,color) | 画文字 |
| draw_surface(surface,x,y,w,h,sx,sy) | 贴图（可裁剪源区域） |
| redraw() | 全局重绘，强制所有自绘控件执行 on_draw |
3. 分层绘制案例
两个矩形控件叠放：ID=10 蓝色矩形（下图）画”水果”、ID=11 黄色矩形（上图）画”小岛”，用 draw_surface 裁剪显示：
function on_draw(screen_id, control_id)
if control_id == 10 then
set_pen_color(0x001F) -- 蓝色
draw_rect(0, 0, 800, 480, 1)
draw_surface(surface[1], 293, 88, 222, 353, 0, 0)
elseif control_id == 11 then
set_pen_color(0xFFE0) -- 黄色
draw_rect(0, 0, 800, 480, 1)
draw_surface(surface[2], 293, 88, 222, 353, 0, 0)
end
end
control_id 判断决定画到哪个图层——界面编辑器里叠放顺序就是 Z 轴，上层的控件后绘制、盖住下层。
画图三坑：①draw_xxx 只能在 on_draw 里调用，别在 on_run/on_update 里画；②控件 ID 为 0 不自绘；③RGB565 是 16 位色（5-6-5），用 RGB888 值直接传会偏色。
整理自 广州大彩科技 VisualHMI 开发文档（hmi-doc.gz-dc.com）LUA 教程「画图」，版权归大彩科技所有。
发表回复