lvgl canvas

1. 下载一张bmp图像

图片链接

2. 调整图片的大小

具体操作详见：图片尺寸、像素修改

3. 在线生成lvgl图片点阵信息

链接：lvgl图片在线生成.c文件

4.将生成的图片image_dog.c文件放到lvgl工程中

5. 配置画布的大小，及显示的图片

LV_IMG_DECLARE(image_dog);
#define CANVAS_WIDTH  210
#define CANVAS_HEIGHT 160

6. 设置画布的缓冲区

7. 配置画布的样式

8.设置画布空间的位置

9. 设置图像在画布中的位置

10. 绘制矩形、文本、直线、多边形、圆

	//4.画布
	static lv_color_t cbuf[LV_CANVAS_BUF_SIZE_TRUE_COLOR(CANVAS_WIDTH, CANVAS_HEIGHT)];
	static lv_style_t canvas_style;
	//4.1 画布样式配置
	lv_style_copy(&canvas_style, &lv_style_plain);
	canvas_style.body.main_color = LV_COLOR_RED;
	canvas_style.body.grad_color = LV_COLOR_MAROON;
	canvas_style.body.radius = 4;
	canvas_style.body.border.width = 2;
	canvas_style.body.border.color = LV_COLOR_WHITE;
	canvas_style.body.shadow.color = LV_COLOR_WHITE;
	canvas_style.body.shadow.width = 4;
	canvas_style.line.width = 2;
	canvas_style.line.color = LV_COLOR_BLACK;
	canvas_style.text.color = LV_COLOR_BLUE;
	//4.2 创建一个画布对象
	lv_obj_t * canvas = lv_canvas_create(lv_scr_act(), NULL);
	//4.3 为画布设置一个缓冲区
	lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_IMG_CF_TRUE_COLOR);
	//4.4 设置画布对齐位置
	lv_obj_align(canvas, NULL, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0);
	//4.5 设置画布背景色
	lv_canvas_fill_bg(canvas, LV_COLOR_WHITE);
	//4.6 在画布上绘画图像
	lv_canvas_draw_img(canvas, 0, 0, &image_dog, &canvas_style); //相对画布的位置
	//4.7 在画布上绘制一个矩形
	lv_point_t line_point[4];
	lv_canvas_draw_rect(canvas, 0, 0, 30, 30, &canvas_style);
	//4.8 在画布上绘制一个文本
	lv_canvas_draw_text(canvas, 40, 40, 200, &canvas_style, "WaveShare TEXT", LV_LABEL_ALIGN_CENTER);
	//4.9 绘制一条线
	line_point[0].x = 30;
	line_point[0].y = 40;
	line_point[1].x = 60;
	line_point[1].y = 80;
	lv_canvas_draw_line(canvas, line_point, 2, &canvas_style);
	//4.10 绘制一个多边形
	line_point[0].x = 100;
	line_point[0].y = 100;
	line_point[1].x = 120;
	line_point[1].y = 120;
	line_point[2].x = 100;
	line_point[2].y = 120;
	line_point[3].x = 120;
	line_point[3].y = 100;
	lv_canvas_draw_polygon(canvas, line_point, 4, &canvas_style);
	//4.11 绘制一个圆
	lv_canvas_draw_arc(canvas, 80, 80, 10, 0, 360, &canvas_style);

10.效果演示