画布继承自图像，用户可以在其中绘制任何内容。可以使用 lvgl 的绘图引擎在此处绘制矩形，文本，图像，圆弧。除了一些“效果”，还可以应用，例如旋转，缩放和模糊。
画布的主要部分称为 LV_CANVAS_PART_MAIN ，只有 image_recolor 属性用于为LV_IMG_CF_ALPHA_1/2/4/8BIT 图像赋予颜色。
画布需要一个缓冲区来存储绘制的图像。要将缓冲区分配给画布，请使用。静态缓冲区（不能是局部变量）在哪里， 用于保存画布的图像。例如， 。宏有助于确定具有不同颜色格式的缓冲区的大小。
使用的是这个函数lv_canvas_set_buffer(canvas, buffer, width, height, LV_IMG_CF_...)
对于 LV_IMG_CF_INDEXED_... 颜色格式，必须使用初始化调色板 ，使用这个函数lv_canvas_set_palette(canvas, 3, LV_COLOR_RED)，将 index = 3 的像素设置为红色
用这个函数来设置像素点颜色lv_canvas_set_px(canvas, x, y, LV_COLOR_RED)
用这个函数来设置背景以及不透明度lv_canvas_fill_bg(canvas, LV_COLOR_BLUE, LV_OPA_50)
用这个函数可以把数组复制到画板像素上lv_canvas_copy_buf(canvas, buffer_to_copy, x, y, width, height)
另外，可以在画板中绘制其他控件，如下：
lv_canvas_draw_rect(canvas, x, y, width, heigth, &draw_dsc)
lv_canvas_draw_text(canvas, x, y, max_width, &draw_dsc, txt, LV_LABEL_ALIGN_LEFT/CENTER/RIGHT)
lv_canvas_draw_img(canvas, x, y, &img_src, &draw_dsc)
lv_canvas_draw_line(canvas, point_array, point_cnt, &draw_dsc)
lv_canvas_draw_polygon(canvas, points_array, point_cnt, &draw_dsc)
lv_canvas_draw_arc(canvas, x, y, radius, start_angle, end_angle, &draw_dsc)
其中draw_dsc需要用这个函数进行初始化lv_draw_rect/label/img/line_dsc_init()
lv_canvas_transform() 可用于旋转和/或缩放图像的图像并将结果存储在画布上。该函数需要以下
参数如下：
请注意，画布无法自身旋转。您需要源和目标画布或图像
用这个函数可以指定水平模糊lv_canvas_blur_hor(canvas, &area, r)
用这个函数可以指定垂直模糊lv_canvas_blur_ver(canvas, &area, r)
默认画布是不能点击的，所以没有任何时间，但是可以通过这个函数来使能点击lv_obj_set_click(canvas, true)
我们直接来两个官方的例子自己看看效果吧
#define CANVAS_WIDTH 200
#define CANVAS_HEIGHT 150
void lvgl_canvas_test1(void)
{
lv_draw_rect_dsc_t rect_dsc;
lv_draw_rect_dsc_init(&rect_dsc);
rect_dsc.radius = 10;
rect_dsc.bg_opa = LV_OPA_COVER;
rect_dsc.bg_grad_dir = LV_GRAD_DIR_HOR;
rect_dsc.bg_color = LV_COLOR_RED;
rect_dsc.bg_grad_color = LV_COLOR_BLUE;
rect_dsc.border_width = 2;
rect_dsc.border_opa = LV_OPA_90;
rect_dsc.border_color = LV_COLOR_WHITE;
rect_dsc.shadow_width = 5;
rect_dsc.shadow_ofs_x = 5;
rect_dsc.shadow_ofs_y = 5;
lv_draw_label_dsc_t label_dsc;
lv_draw_label_dsc_init(&label_dsc);
label_dsc.color = LV_COLOR_YELLOW;
static lv_color_t cbuf[LV_CANVAS_BUF_SIZE_TRUE_COLOR(CANVAS_WIDTH, CANVAS_HEIGHT)];
lv_obj_t* canvas = lv_canvas_create(lv_scr_act(), NULL);
lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_IMG_CF_TRUE_COLOR);
lv_obj_align(canvas, NULL, LV_ALIGN_CENTER, 0, 0);
lv_canvas_fill_bg(canvas, LV_COLOR_SILVER, LV_OPA_COVER);
lv_canvas_draw_rect(canvas, 70, 60, 100, 70, &rect_dsc);
lv_canvas_draw_text(canvas, 40, 20, 100, &label_dsc, "Some text on text canvas", LV_LABEL_ALIGN_LEFT);
/* Test the rotation. It requires an other buffer where the orignal image is stored.
* So copy the current image to buffer and rotate it to the canvas */
static lv_color_t cbuf_tmp[CANVAS_WIDTH * CANVAS_HEIGHT];
memcpy(cbuf_tmp, cbuf, sizeof(cbuf_tmp));
lv_img_dsc_t img;
img.data = (void*)cbuf_tmp;
img.header.cf = LV_IMG_CF_TRUE_COLOR;
img.header.w = CANVAS_WIDTH;
img.header.h = CANVAS_HEIGHT;
lv_canvas_fill_bg(canvas, LV_COLOR_SILVER, LV_OPA_COVER);
lv_canvas_transform(canvas, &img, 30, LV_IMG_ZOOM_NONE, 0, 0, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2, true);
}效果
#define CANVAS_WIDTH 50
#define CANVAS_HEIGHT 50
void lvgl_canvas_test2(void)
{
/*Create a button to better see the transparency*/
lv_btn_create(lv_scr_act(), NULL);
/*Create a buffer for the canvas*/
static lv_color_t cbuf[LV_CANVAS_BUF_SIZE_INDEXED_1BIT(CANVAS_WIDTH, CANVAS_HEIGHT)];
/*Create a canvas and initialize its the palette*/
lv_obj_t* canvas = lv_canvas_create(lv_scr_act(), NULL);
lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_IMG_CF_INDEXED_1BIT);
lv_canvas_set_palette(canvas, 0, LV_COLOR_TRANSP);
lv_canvas_set_palette(canvas, 1, LV_COLOR_RED);
/*Create colors with the indices of the palette*/
lv_color_t c0;
lv_color_t c1;
c0.full = 0;
c1.full = 1;
/*Transparent background*/
lv_canvas_fill_bg(canvas, c1, LV_OPA_TRANSP);
/*Create hole on the canvas*/
uint32_t x;
uint32_t y;
for (y = 10; y < 30; y ) {
for (x = 5; x < 20; x ) {
lv_canvas_set_px(canvas, x, y, c0);
}
}
}效果：
好了，完结了，更多精彩继续戳↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
