littlevgl教程 Linux,树莓派littlevGL系列教程：画布控件(lv_canvas)

如上图，我们就通过画布控件轻松的画出我们微雪课堂的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); 这两种方式都可以，这里建议大家使用LV_IMG_DECLARE(my_image_name)这种方式，本教程全部采用这种方式。

这里我们只测试一个API，相信也是大家最感兴趣的一个API，那么其它的API又怎么用呢？那么我们可以将上面的注释掉的代码取消注释，然后再次编译运行：

三 代码下载与在线工具链接

大家可以自己去测试一下！OK，本节课程就到这里，下节课我们学习复选框控件！下面附上图片转数组的的网址和微雪课堂logo的C文件：

1.在线图片转数组：