lv_canvas 画布

---

---

前言

• lv_canvas 是一个画布控件,你可以在它上面绘制任意图形,以及进行旋转等操作。
• lv_canvas 画布控件必须得依赖于一个 buffer 缓冲区,此 buffer 缓冲区必须得是全局的或者静
  态的。

一、lv_canvas API

1.1 创建对象

lv_obj_t * lv_canvas_create(lv_obj_t * 父对象, const lv_obj_t * 拷贝对象没有填NULL)

lv_obj_t * lv_canvas_create(lv_obj_t * par, const lv_obj_t * copy)

1.2 为画布设置一个缓冲区。

void lv_canvas_set_buffer(lv_obj_t * 画布对象, void * 缓存数据的buf, lv_coord_t 画布宽度, lv_coord_t 画布高度, lv_img_cf_t 色彩的格式如LV_IMG_CF_RAW，LV_IMG_CF_RAW_ALPHA);

void lv_canvas_set_buffer(lv_obj_t * canvas, void * buf, lv_coord_t w, lv_coord_t h, lv_img_cf_t cf)

1.3 设置画布上一个像素的颜色

void lv_canvas_set_px(lv_obj_t * 画布对象, lv_coord_t 要设置的点的x坐标, lv_coord_t 要设置的点的y坐标, lv_color_t 点的颜色);

void lv_canvas_set_px(lv_obj_t * canvas, lv_coord_t x, lv_coord_t y, lv_color_t c)

1.4 用索引格式设置画布的调色板颜色。仅对“lv_img_cf_indexed1/2/3 /8”有效

void lv_canvas_set_palette(lv_obj_t * canvas, uint8_t id, lv_color_t c);

void lv_canvas_set_palette(lv_obj_t * canvas, uint8_t id, lv_color_t c)

1.5 获取画布上一个像素的颜色

lv_color_t lv_canvas_get_px(lv_obj_t * 画布对象, lv_coord_t 要读取的点的x坐标, lv_coord_t 要读取的点的y坐标);

lv_color_t lv_canvas_get_px(lv_obj_t * canvas, lv_coord_t x, lv_coord_t y)

1.6 获取画布的图像中指向’ lv_img_dsc_t '变量的指针。

lv_img_dsc_t * lv_canvas_get_img(lv_obj_t * 画布对象)

lv_img_dsc_t * lv_canvas_get_img(lv_obj_t * canvas)

2.0 其他函数

2.1 将缓冲区复制到画布

void lv_canvas_copy_buf(lv_obj_t * canvas, const void * to_copy, lv_coord_t x, lv_coord_t y, lv_coord_t w, lv_coord_t h)

1.8 转换和图像，并将结果存储在画布上。

void lv_canvas_transform(lv_obj_t * canvas, lv_img_dsc_t * img, int16_t angle, uint16_t zoom, lv_coord_t offset_x,
                         lv_coord_t offset_y,
                         int32_t pivot_x, int32_t pivot_y, bool antialias);

1.9 在画布上应用水平模糊

void lv_canvas_blur_hor(lv_obj_t * canvas, const lv_area_t * area, uint16_t r);

1.10 在画布上应用垂直模糊

void lv_canvas_blur_ver(lv_obj_t * canvas, const lv_area_t * area, uint16_t r);

1.11 填充画布背景

void lv_canvas_fill_bg(lv_obj_t * canvas, lv_color_t color, lv_opa_t opa);

1.12 在画布上画一个矩形

void lv_canvas_draw_rect(lv_obj_t * canvas, lv_coord_t x, lv_coord_t y, lv_coord_t w, lv_coord_t h,
                         const lv_draw_rect_dsc_t * rect_dsc);

1.13 在画布上画一个文本

void lv_canvas_draw_text(lv_obj_t * canvas, lv_coord_t x, lv_coord_t y, lv_coord_t max_w,
                         lv_draw_label_dsc_t * label_draw_dsc,
                         const char * txt, lv_label_align_t align);

1.14 在画布上画一个图像

void lv_canvas_draw_img(lv_obj_t * canvas, lv_coord_t x, lv_coord_t y, const void * src,
                        const lv_draw_img_dsc_t * img_draw_dsc);

1.15 在画布上画一条线

void lv_canvas_draw_line(lv_obj_t * canvas, const lv_point_t points[], uint32_t point_cnt,
                         const lv_draw_line_dsc_t * line_draw_dsc);

1.16 在画布上绘制一个多边形

void lv_canvas_draw_polygon(lv_obj_t * canvas, const lv_point_t points[], uint32_t point_cnt,
                            const lv_draw_rect_dsc_t * poly_draw_dsc);

1.17 在画布上画一条弧线

void lv_canvas_draw_arc(lv_obj_t * canvas, lv_coord_t x, lv_coord_t y, lv_coord_t r, int32_t start_angle,
                        int32_t end_angle, const lv_draw_line_dsc_t * arc_draw_dsc);

二、使用

1.示例

#define CANVAS_WIDTH  200
#define CANVAS_HEIGHT  150

void lv_ex_canvas_1()
{
    lv_draw_rect_dsc_t rect_dsc;//实例化矩形
    lv_draw_rect_dsc_init(&rect_dsc);//初始化矩形对象
    rect_dsc.radius = 20;//设置半径
    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 = 5;//边框宽度
    rect_dsc.border_opa = LV_OPA_90;//边框透明度90%
    rect_dsc.border_color = LV_COLOR_GREEN;//边框颜色
    rect_dsc.shadow_width = 5;//阴影宽度
    rect_dsc.shadow_ofs_x = 5;//阴影偏移x
    rect_dsc.shadow_ofs_y = 15;//阴影偏移y

    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)];//设置buf存放画板数据

    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));//拷贝buf数据，作为新的图片源
    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);//旋转3度(0.1度分辨率)图像，并将结果存储在画布上。
}

运行