LVGL 的画布控件继承自图像控件，其核心区域定义为 LV_CANVAS_PART_MAIN。此区域专为单色、低色深 alpha 图像（格式如 LV_IMG_CF_ALPHA_1/2/4/8BIT）提供了一个 image_recolor 属性，可为其重新着色。画布的核心功能在于允许用户直接在上面进行绘制，您可以利用 LVGL 强大的绘图引擎，自由地添加矩形、文本、图像及圆弧等图形元素。此外，画布内容还支持施加旋转、缩放、模糊等多种视觉特效。

1.缓冲区
Canvas 需要一个缓冲区来存储绘制的图像。 要为 Canvas 分配缓冲区，请使用函数 lv_canvas_set_buffer(canvas, buffer, width, height, LV_COLOR_FORMAT_…) ， 其中参数 buffer 是一个静态缓冲区（不能是局部变量）来保存画布的图像。例如，对于 100x50 的 ARGB888缓冲区，可以这样分配：
• static uint8_t buffer[100 * 50 * 4]
• static uint8_t buffer[LV_CANVAS_BUF_SIZE(width, height, bit_per_pixel, stride_in_bytes)]
画布支持所有LVGL内置支持的颜色格式，如 LV_COLOR_FORMAT_ARGB8888 或 LV_COLOR_FORMAT_I2 ，请阅读 Color formats 了解完整的格式列表。

2.绘画
要在画布上设置像素，请使用 lv_canvas_set_px_color(canvas, x, y, color, opa) 。 对于 LV_COLOR_FORMAT_I1/2/4/8 颜色索引需要像这样 lv_color_from_int(13); 传递，它将颜色索引 13 作为颜色传递。
lv_canvas_fill_bg(canvas, lv_color_hex(0x00ff00), LV_OPA_50) 将整个画布填充为蓝色，不透明度为 50%。 请注意，如果当前颜色格式不支持(例如 LV_COLOR_FORMAT_A8)，则该颜色将被忽略。同样，如果不支持不透明度(例如 LV_COLOR_FORMAT_RGB565)，不透明度将被忽略。
可以使用 lv_canvas_copy_buf(canvas, buffer_to_copy, x, y, width, height) 将像素数组复制到画布。缓冲区和画布的颜色格式需要一致。
要在画布上绘制内容，请直接使用 LVGL 的绘制函数。有关更多详细信息，请参阅后面的示例。
draw 函数可以绘制为 LVGL 可以渲染的任何颜色格式，通常是： LV_COLOR_FORMAT_RGB565 、 LV_COLOR_FORMAT_RGB888 、 LV_COLOR_FORMAT_XRGB888 、LV_COLOR_FORMAT_ARGB8888

3.事件
画布对象不会发送特殊事件。

4.代码

//Write codes screen_1_canvas_1
//创建画布对象
ui->screen_1_canvas_1 = lv_canvas_create(ui->screen_1);
//声明静态缓冲区（300200像素，带alpha通道）
static lv_color_t buf_screen_1_canvas_1[300200*4];
//设置画布缓冲区
lv_canvas_set_buffer(ui->screen_1_canvas_1, buf_screen_1_canvas_1, 300, 200, LV_IMG_CF_TRUE_COLOR_ALPHA);
//填充画布颜色为灰色
lv_canvas_fill_bg(ui->screen_1_canvas_1, lv_color_hex(0x8a8a8a), 255);
//Canvas draw rectangle
//初始化矩形绘制描述符
lv_draw_rect_dsc_t screen_1_canvas_1_rect_dsc_0;
lv_draw_rect_dsc_init(&screen_1_canvas_1_rect_dsc_0);
//直角矩形（无圆角）
screen_1_canvas_1_rect_dsc_0.radius = 0;
//背景完全不透明
screen_1_canvas_1_rect_dsc_0.bg_opa = 255;
//蓝色背景
screen_1_canvas_1_rect_dsc_0.bg_color = lv_color_hex(0x0775B7);
//无渐变
screen_1_canvas_1_rect_dsc_0.bg_grad.dir = LV_GRAD_DIR_NONE;
//无边框
screen_1_canvas_1_rect_dsc_0.border_width = 0;
screen_1_canvas_1_rect_dsc_0.border_opa = 255;
screen_1_canvas_1_rect_dsc_0.border_color = lv_color_hex(0x000000);
//在画布绘制矩形
lv_canvas_draw_rect(ui->screen_1_canvas_1, 100, 80, 100, 50, &screen_1_canvas_1_rect_dsc_0);

//Canvas draw text
//初始化文本绘制描述符

lv_draw_label_dsc_t screen_1_canvas_1_label_dsc_1;
lv_draw_label_dsc_init(&screen_1_canvas_1_label_dsc_1);
//配置文本属性
screen_1_canvas_1_label_dsc_1.color = lv_color_hex(0x000000);
screen_1_canvas_1_label_dsc_1.font = &lv_font_montserratMedium_12;
//在画布绘制文本
lv_canvas_draw_text(ui->screen_1_canvas_1, 0, 0, 100, &screen_1_canvas_1_label_dsc_1, “”);
//位置以及大小
lv_obj_set_pos(ui->screen_1_canvas_1, 77, 149);
lv_obj_set_size(ui->screen_1_canvas_1, 300, 200);
//禁用滚轮
lv_obj_set_scrollbar_mode(ui->screen_1_canvas_1, LV_SCROLLBAR_MODE_OFF);

本文章由威三学社出品
对课程感兴趣可以私信联系