立即注册 找回密码

微雪课堂

搜索
微雪课堂 图形用户界面(GUI) 查看内容

STM32之littlevGL系列教程:线条控件(lv_line)

2020-3-29 12:19| 发布者: imliubo| 查看: 2603| 评论: 0|原作者: IAMLIUBO

摘要: Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了标签控件(lv_label)和LED控件(lv_led),那么这节课继续跟大家学习一个比较简单的控件,废话不多说!一 有图有真相没错,你没看错,就是一个很简单的 ...
Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了标签控件(lv_label)和LED控件(lv_led),那么这节课继续跟大家学习一个比较简单的控件,废话不多说!
一 有图有真相

没错,你没看错,就是一个很简单的控件!
二 代码分析
void line_test(void)
{
    /*Create an array for the points of the line*/
    static lv_point_t line_points[] = { {5, 5}, {70, 70}, {120, 10}, {180, 60}, {240, 10} };

    /*Create new style (thick dark blue)*/
    static lv_style_t style_line;
    lv_style_copy(&style_line, &lv_style_plain);
    style_line.line.color = LV_COLOR_MAKE(0x00, 0x3b, 0x75);
    style_line.line.width = 3;
    style_line.line.rounded = 1;

    /*Copy the previous line and apply the new style*/
    lv_obj_t * line1;
    line1 = lv_line_create(lv_scr_act(), NULL);
    lv_line_set_points(line1, line_points, 5);     /*Set the points*/
    lv_line_set_style(line1, LV_LINE_STYLE_MAIN, &style_line);
    lv_obj_align(line1, NULL, LV_ALIGN_CENTER, 0, 0);
}
相信大家在小学的时候应该就学过,在一个平面坐标系中两点能确定一条直线,没错,我们这里画线也是通过点坐标去确定的,你只要给出窗口中任意的两点就可以画出你想要的直线,不管是水平线、竖直线还是斜线,所以最重要的是我们要先理解我们的窗口坐标系是怎么样规定的,貌似前面几节教程都没有给大家好好说一下,那这里给大家简单画个图,帮助大家理解记忆:


在屏幕中,左上角我们规定为原点,也就是(0,0),然后横坐标X是水平方向向右变大,纵坐标竖直向下变大,值得说明的是这里不是负增长,大家不要理解成了水平坐标系中的第四象限。

那么我们知道了屏幕或者窗口对应的坐标系就简单多了,我们就可以通过下面的方式设置坐标点,当然坐标点对应的就是我们像素点:
static lv_point_t line_points[] = { {5, 5}, {70, 70}, {120, 10}, {180, 60}, {240, 10} };
我们可以像上面一样一次设置多个点,也可以一次只设置两个点画一条直线。
    static lv_style_t style_line;
    lv_style_copy(&style_line, &lv_style_plain);
    style_line.line.color = LV_COLOR_MAKE(0x00, 0x3b, 0x75);
    style_line.line.width = 3;
    style_line.line.rounded = 1;
然后我们通过设置样式,设置了一下线条的颜色和线宽。
    line1 = lv_line_create(lv_scr_act(), NULL);
    lv_line_set_points(line1, line_points, 5);     /*Set the points*/
    lv_line_set_style(line1, LV_LINE_STYLE_MAIN, &style_line);
    lv_obj_align(line1, NULL, LV_ALIGN_CENTER, 0, 0);
这里最重要的一行代码就是:
lv_line_set_points(line1, line_points, 5);
我们通过这个将前面我们创建的坐标点设置给我们要画的线条,第三个参数是点的数量,当然我们创建了5个点,但是你这里填写2,就只会画一条直线,而不是将所有的点都连成直线。
对了,画水平线和竖直线大家应该会吧~(Tips:保持横坐标相同,或者纵坐标相同~)

OK,本节课就到这里,我们下节课学习列表控件,没错,就是可以滑动选择的列表控件!



91

顶一下

刚表态过的朋友 (91 人)

相关阅读

最新评论

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

GMT+8, 2024-3-29 03:09 , Processed in 0.018074 second(s), 17 queries .

返回顶部