lvgl8.2-canvas

lv_canvas概念

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

在画布上绘制矩形
• lv_canvas_draw_rect(canvas, x, y, width, heigth, &draw_dsc)
在画布上绘制文本内容
• lv_canvas_draw_text(canvas, x, y, max_width, &draw_dsc, txt)
在画布上绘制图片
• 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)

demo:

void lvgl_canvas_demo(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_grad.stops[0].color = lv_palette_main(LV_PALETTE_RED);
	rect_dsc.bg_grad.stops[1].color = lv_palette_main(LV_PALETTE_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_palette_main(LV_PALETTE_ORANGE);
	
	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());
	lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_IMG_CF_TRUE_COLOR);
	lv_obj_center(canvas);
	lv_canvas_fill_bg(canvas, lv_palette_lighten(LV_PALETTE_GREY,3), 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");
	
	/* 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_palette_lighten(LV_PALETTE_GREY,3), LV_OPA_COVER);
	lv_canvas_transform(canvas, &img, 30, LV_IMG_ZOOM_NONE, 0, 0, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2, true);
}

效果图：