一. LVGL GUI画布控件的概念

画布继承自图像，用户可以在其中绘制任何内容。可以使用 lvgl 的绘图引擎在此处绘制矩形，文本，图像，圆弧。除了一些“效果”，还可以应用，例如旋转，缩放和模糊。

二. LVGL GUI画布小部件和样式

画布的主要部分称为 LV_CANVAS_PART_MAIN ，只有 image_recolor 属性用于为LV_IMG_CF_ALPHA_1/2/4/8BIT 图像赋予颜色。

三. LVGL GU画布控件的使用

1. 缓冲(Buffer)

画布需要一个缓冲区来存储绘制的图像。要将缓冲区分配给画布，请使用。静态缓冲区（不能是局部变量）在哪里， 用于保存画布的图像。例如， 。宏有助于确定具有不同颜色格式的缓冲区的大小。

使用的是这个函数lv_canvas_set_buffer(canvas, buffer, width, height, LV_IMG_CF_...)

2. 调色板(Palette)

对于 LV_IMG_CF_INDEXED_... 颜色格式，必须使用初始化调色板 ，使用这个函数lv_canvas_set_palette(canvas, 3, LV_COLOR_RED)，将 index = 3 的像素设置为红色

3. 绘画(Drawing)

用这个函数来设置像素点颜色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()

4. 转换(Transformations)

lv_canvas_transform() 可用于旋转和/或缩放图像的图像并将结果存储在画布上。该函数需要以下
参数如下：

• canvas ：指向画布对象以存储转换结果的指针。
• img pointer ：转换为图像描述符。也可以是其他画布的图像描述符（ lv_canvas_get_img() ）。
• angle ：旋转角度（0..3600），0.1 度分辨率
• zoom ：缩放系数，基数是256，代表原比例（256 不缩放，512 倍大，128 缩小一倍）
• offset_x :偏移量 X 告诉将结果数据放在目标画布上的位置
• offset_y :偏移量 X 告诉将结果数据放在目标画布上的位置
• pivot_x :旋转的 X 轴。相对于源画布。设置为绕中心旋转 source width / 2
• pivot_y :旋转的枢轴 Y。相对于源画布。设置为绕中心旋转 source height / 2
• antialias true：在转换过程中应用抗锯齿。看起来更好，但速度较慢。

请注意，画布无法自身旋转。您需要源和目标画布或图像

5. Blur(模糊)

用这个函数可以指定水平模糊lv_canvas_blur_hor(canvas, &area, r)

用这个函数可以指定垂直模糊lv_canvas_blur_ver(canvas, &area, r)

6. 事件(Events)

默认画布是不能点击的，所以没有任何时间，但是可以通过这个函数来使能点击lv_obj_set_click(canvas, true)

7. 源码示例

我们直接来两个官方的例子自己看看效果吧

示例1

#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);
}

效果

示例2

#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);
        }
    }
}

效果：

好了，完结了，更多精彩继续戳↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓