1. 下载一张bmp图像
2. 调整图片的大小
具体操作详见:图片尺寸、像素修改
3. 在线生成lvgl图片点阵信息
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.效果演示