lvgl 画好一个圆弧arc 要了解的相关知识

目录

• 一、概述
  • 1. css盒子模型示意图
  • 2. 圆弧的理解对象
  • 3. lvgl 版本
• 二、功能细节
  • 1. 圆弧的角度
    • 1.1 圆弧的0度在哪里？
    • 1.2 设置圆弧角度的
    • 1.3 设置圆弧的背景角度
  • 2. 圆弧的半径
  • 3. 圆弧的圆角
    • 3.1 设置圆弧的圆角
      • 效果如下：
  • 4. 圆弧的宽度
    • 4.1圆弧主体的宽度
    • 4.2 圆弧指示器的宽度
  • 5. 设置圆弧对象的位置
    • 5.1设置对象的绝对坐标
    • 5.2设置相对父类的位置
  • 6. 设置圆弧的颜色
    • 6.1 背景颜色
    • 6.2 圆弧主体颜色
    • 6.3 圆弧指示器颜色
  • 7. 设置圆弧的填充距离
    • 7.1 填充的定义
    • 7.2 API 使用如下
      • 将四个内边距分别设置为20
      • 将四个内边距全部设置为0
    • 7.3 内边距为0 的情况

一、概述

1. css盒子模型示意图

lvgl 的样式设置参考了css 的盒子模型的概念，了解盒子模型的相关知识点，有助于利用lvgl 实现我们需要的UI效果。

2. 圆弧的理解对象

圆弧对象不仅仅是“红绿色圆”所组成的部分，而是图中以白色为背景的所有区域。

3. lvgl 版本

V8.3.x

二、功能细节

1. 圆弧的角度

1.1 圆弧的0度在哪里？

默认模式下（NORMAL），圆弧的0度在3点钟的方向，随着度数的增长，圆弧向着顺时针的方向生长。

1.2 设置圆弧角度的

设置开始和结束角度

void lv_arc_set_angles(lv_obj_t * arc, uint16_t start, uint16_t end);
1

设置结束角度

void lv_arc_set_end_angle(lv_obj_t * arc, uint16_t end);
1

1.3 设置圆弧的背景角度

这里的背景指的是圆弧主体。

void lv_arc_set_bg_angles(lv_obj_t * arc, uint16_t start, uint16_t end);
void lv_arc_set_bg_start_angle(lv_obj_t * arc, uint16_t start);
void lv_arc_set_bg_end_angle(lv_obj_t * arc, uint16_t end);

1
2
3
4

2. 圆弧的半径

lvgl arc 没有直接提供api 去设置一个圆弧的半径。lv_obj_set_style_radius看起来很像，实际上是用来设置圆弧对象背景的4个角的弧度的。

由于arc 对象继承于obj 类对象，我们可以通过调用 lv_obj_set_size 函数来设置圆弧对象的宽和高，从而实现对圆弧半径的设置。

void lv_obj_set_size(lv_obj_t * obj, lv_coord_t w, lv_coord_t h);
1

3. 圆弧的圆角

3.1 设置圆弧的圆角

lv_obj_set_style_radius( ui_Arc1, 20, LV_PART_MAIN | LV_STATE_DEFAULT );
1

效果如下：

4. 圆弧的宽度

旧版本（V7.11）的lvgl 设置圆弧宽度的api 比较隐蔽，是通过设置样式的line_width 来实现设置圆弧宽度。

新版本（V8.3.x ) 的lvgl设置圆弧宽度如下：

void lv_obj_set_style_arc_width(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector)
1

4.1圆弧主体的宽度

lv_obj_set_style_arc_width( ui_Arc1, 10, LV_PART_MAIN | LV_STATE_DEFAULT );
1

4.2 圆弧指示器的宽度

lv_obj_set_style_arc_width( ui_Arc1, 10, LV_PART_INDICATOR | LV_STATE_DEFAULT );
1

5. 设置圆弧对象的位置

5.1设置对象的绝对坐标

void lv_obj_set_pos(lv_obj_t * obj, lv_coord_t x, lv_coord_t y);
1

5.2设置相对父类的位置

设置相对父类中央对齐。其他对齐方式，可以跳转到LV_ALIGN_CENTER 定义处，选择其他对齐方式。

lv_obj_set_align( ui_Arc1, LV_ALIGN_CENTER );
1

6. 设置圆弧的颜色

如上图所示，圆弧主要有三种颜色需要设置。

6.1 背景颜色

 lv_obj_set_style_bg_color( ui_Arc1, lv_color_white(), LV_PART_MAIN | LV_STATE_DEFAULT );
1

6.2 圆弧主体颜色

//绿色
lv_obj_set_style_arc_color( ui_Arc1, lv_color_hex( 0x04FF0F ), LV_PART_MAIN | LV_STATE_DEFAULT );
1
2

6.3 圆弧指示器颜色

lv_obj_set_style_arc_color( ui_Arc1, lv_color_hex( 0xFF404B ), LV_PART_INDICATOR | LV_STATE_DEFAULT );
1

7. 设置圆弧的填充距离

7.1 填充的定义

定义元素边框与元素内容之间的空间，即上下左右的内边距。

• 上边距： pad_top
• 下边距：pad_bottom
• 左边距：pad_left
• 右边距：pad_right

7.2 API 使用如下

将四个内边距分别设置为20

lv_obj_set_style_pad_left( ui_Arc1, 20, LV_PART_MAIN | LV_STATE_DEFAULT );
lv_obj_set_style_pad_right( ui_Arc1, 20, LV_PART_MAIN | LV_STATE_DEFAULT );
lv_obj_set_style_pad_top( ui_Arc1, 20, LV_PART_MAIN | LV_STATE_DEFAULT );
lv_obj_set_style_pad_bottom( ui_Arc1, 20, LV_PART_MAIN | LV_STATE_DEFAULT );

1
2
3
4
5

将四个内边距全部设置为0

lv_obj_set_style_pad_all( ui_Arc1, 0, LV_PART_MAIN | LV_STATE_DEFAULT );
1

7.3 内边距为0 的情况