Hi，大家好，欢迎来到树莓派之littlevGL课堂，我们在上节课中学习了日历控件(lv_btn)，本节课带大家来学习一下画布控件，本节课程的画布控件相对来讲是一个非常重要的概念，是非常值得我们学习的，所以大家本节课程要好好学习，本节课程学好了大家就可以做很多好看的效果了。 一 简单了解与API 不过在开始之前我们首先需要了解一下什么是画布控件，真正理解了画布控件，才可以运用的更好，其实画布就是一块区域，我们可以在这个区内画很多小组件，比如矩形，文本，图像等等，当然你可以参考下面的API去写一些自己想要展示的图案： lv_canvas_draw_rect(canvas, x, y, width, heigth, &style) lv_canvas_draw_text(canvas, x, y, max_width, &style, txt, LV_LABEL_ALIGN_LEFT/CENTER/RIGTH) lv_canvas_draw_img(canvas, x, y, &img_src, &style) lv_canvas_draw_line(canvas, point_array, point_cnt, &style) lv_canvas_draw_polygon(canvas, points_array, point_cnt, &style) lv_canvas_draw_arc(canvas, x, y, radius, start_angle, end_angle, &style) 废话不多说，我们看一下实例：
如上图，我们就通过画布控件轻松的画出我们微雪课堂的logo了，当然这个logo的图片内容是通过littlevGL的在线工具生成的C语言数组，所以本节课程会多一个文件，当然在文章的最后大家是可以下载的，那么我们先来看一下代码吧： 三 代码分析 用户可下载"圆弧对象(lv_arc)的使用"文章末尾的Demo工程(点击我直接下载),参考圆弧对象(lv_arc)的使用文章,将以下Demo代码复制到Demo工程test.c文件空白处.然后在test.c文件的create_test()函数中增加canvas_test()函数测试。 #define CANVAS_WIDTH 400
#define CANVAS_HEIGHT 300
LV_IMG_DECLARE(WaveShare_LOGO)
void canvas_test(void)
{
static lv_style_t style;
lv_style_copy(&style, &lv_style_plain);
style.body.main_color = LV_COLOR_RED;
style.body.grad_color = LV_COLOR_MAROON;
style.body.radius = 4;
style.body.border.width = 2;
style.body.border.color = LV_COLOR_WHITE;
style.body.shadow.color = LV_COLOR_WHITE;
style.body.shadow.width = 4;
style.line.width = 2;
style.line.color = LV_COLOR_BLACK;
style.text.color = LV_COLOR_BLUE;
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_WHITE);
/* test the image draw function */
lv_canvas_draw_img(canvas, 50, 180, &WaveShare_LOGO, &style);
// lv_canvas_fill_bg(canvas, LV_COLOR_WHITE);
// lv_point_t line_point[4];
// lv_canvas_draw_rect(canvas, 0, 0, 30, 30, &style);
// lv_canvas_draw_text(canvas, 40, 40, 200, &style, "WaveShare TEXT", LV_LABEL_ALIGN_CENTER);
// 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, &style);
// 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, &style);
// lv_canvas_draw_arc(canvas, 80, 80, 10, 0, 360, &style);
}首先我们创建了一个样式空对象，然后我们从样式名为lv_style_plain的对象中复制了一些样式属性，接下来就是对复制的基本样式属性做了一部分修改，比如主体颜色、线宽啥的，代码相对简单，这里就不再做进一步的详细说明。 然后我们又创建了一个用于存放画布中各点颜色的数组缓冲区，用于存放存放着我们接下来创建的画布所有颜色数据，接下来就是创建了我们的画布对象，这个跟之前我们创建别的对象一样，lv_canvas_set_buffer这个函数就是设置我们创建的画布的的缓冲区为前面我们创建的，最后我们做了居中对齐。 接下来就是将微雪课堂的logo通过lv_canvas_draw_img这个函数显示出来了，其中WaveShare_LOGO参数就是我们通过工具转换出来的图片数据数组，一会大家可以下载这个文件去做测试： const lv_img_dsc_t WaveShare_LOGO = {
.header.always_zero = 0,
.header.w = 288,
.header.h = 80,
.data_size = 23040 * LV_COLOR_SIZE / 8,
.header.cf = LV_IMG_CF_TRUE_COLOR,
.data = WaveShare_LOGO_map,
};cpp代码：extern const lv_img_t my_image_name; LV_IMG_DECLARE(my_image_name); 这里我们只测试一个API，相信也是大家最感兴趣的一个API，那么其它的API又怎么用呢？那么我们可以将上面的注释掉的代码取消注释，然后再次编译运行：  三 代码下载与在线工具链接 大家可以自己去测试一下！OK，本节课程就到这里，下节课我们学习复选框控件！下面附上图片转数组的的网址和微雪课堂logo的C文件： 1.在线图片转数组： |
