立即注册 找回密码

微雪课堂

搜索

树莓派littlevGL系列教程:画布控件(lv_canvas)

2019-11-26 21:23| 发布者: imliubo| 查看: 3957| 评论: 0|原作者: IAMLIUBO

摘要: Hi,大家好,欢迎来到树莓派之littlevGL课堂,我们在上节课中学习了日历控件(lv_btn),本节课带大家来学习一下画布控件,本节课程的画布控件相对来讲是一个非常重要的概念,是非常值得我们学习的,所以大家本节课程 ...
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);
这两种方式都可以,这里建议大家使用LV_IMG_DECLARE(my_image_name)这种方式,本教程全部采用这种方式。

这里我们只测试一个API,相信也是大家最感兴趣的一个API,那么其它的API又怎么用呢?那么我们可以将上面的注释掉的代码取消注释,然后再次编译运行:
三 代码下载与在线工具链接
大家可以自己去测试一下!OK,本节课程就到这里,下节课我们学习复选框控件!下面附上图片转数组的的网址和微雪课堂logo的C文件:
1.在线图片转数组:
2.waveshare logo 文件下载:

WaveShare_LOGO.zip

如何导入工程:


82

顶一下

刚表态过的朋友 (82 人)

关键词树莓派 littlevGL

相关阅读

最新评论

Arduino
基础入门
OpenCV
littleGL

微雪官网|产品资料|手机版|小黑屋|微雪课堂. ( 粤ICP备05067009号 )

GMT+8, 2021-9-21 15:52 , Processed in 0.022858 second(s), 18 queries .

返回顶部