圆弧由背景和前景弧组成，通过lv_arc_create创建。

1
2
3
4
5
6



lv_obj_t *obj1 = lv_arc_create(lv_scr_act());


lv_obj_align(obj1, LV_ALIGN_TOP_LEFT, 10, 10);

1. Parts

圆弧的部件包括LV_PART_MAIN，LV_PART_INDICATOR，LV_PART_KNOB。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27



lv_obj_set_style_bg_opa(obj1, LV_OPA_100, LV_PART_MAIN);


    lv_obj_set_style_bg_color(obj1, lv_color_hex(0xFF0000), LV_PART_MAIN);


 


    lv_obj_set_style_bg_opa(obj1, LV_OPA_100, LV_PART_INDICATOR);


    lv_obj_set_style_bg_color(obj1, lv_color_hex(0x00FF00), LV_PART_INDICATOR);


    lv_obj_set_style_pad_column(obj1, 40, LV_PART_INDICATOR);


    lv_obj_set_style_pad_row(obj1, 40, LV_PART_INDICATOR);


 


    lv_obj_set_style_bg_color(obj1, lv_color_hex(0x0000FF), LV_PART_KNOB);

这里没看到INDICATOR部分的显示。

2. 样式

2.1 旋转

旋转是顺时针旋转。

1
2
3



lv_arc_set_rotation(obj1, 90);

2.3 设置角度范围

可以通过lv_arc_set_bg_angles/lv_arc_set_bg_start_angle/lv_arc_set_bg_end_angle设置，起始范围是【0：360】。0°对应的位置是3点位置，并且沿着顺时针方向增加。

1
2
3



lv_arc_set_bg_angles(obj1, 0, 360);

可是这里似乎有个bug，点击一下后蓝色的Knob会跳一下。

等效的方式：

1
2
3
4
5
6



lv_arc_set_bg_start_angle(obj1, 0);


lv_arc_set_bg_end_angle(obj1, 360);

2.4 设置值范围

通过lv_arc_set_range设置值范围，值的范围和角度范围是对应的。start_angle对应range_min, end_angle对应range_max。

2.5 清除Knob显示

将KNOB的Style移除即可。

1
2
3



lv_obj_remove_style(obj1, NULL, LV_PART_KNOB);

2.6 禁止点击调整值

默认是可以 通过鼠标点击滑动调整值的。

1
2
3



lv_obj_clear_flag(arc, LV_OBJ_FLAG_CLICKABLE);

2.7 修改圆环前景色

1
2
3



lv_obj_set_style_arc_color(obj1, lv_color_hex(0xff0000), LV_PART_INDICATOR);

2.8 修改圆环背景色

1
2
3



lv_obj_set_style_arc_color(obj1, lv_color_hex(0xff0000), LV_PART_MAIN);

2.9 修改圆弧末端形态

通过lv_obj_set_style_arc_rounded可以将圆弧末端设置成圆形或者直线。

1
2
3



lv_obj_set_style_arc_rounded(obj1, false, LV_PART_MAIN);

2.10 修改圆弧宽度

1
2
3



lv_obj_set_style_arc_width(obj1, 20, LV_PART_MAIN);

同样，LV_PART_MAIN对应圆弧的背景，而LV_PART_INDICATOR对应圆弧的前景。

2.11 修改圆弧透明度

1
2
3
4
5
6
7
8
9



lv_obj_set_style_arc_color(obj1, lv_color_hex(0xff0000), LV_PART_MAIN);


lv_obj_set_style_arc_color(obj1, lv_color_hex(0x0000ff), LV_PART_INDICATOR);


lv_obj_set_style_arc_opa(obj1, LV_OPA_0, LV_PART_INDICATOR);

3. 事件

主要的事件是LV_EVENT_VALUE_CHANGED

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45



lv_obj_align(obj1, LV_ALIGN_TOP_LEFT, 10, 10);


    lv_obj_align(label1, LV_ALIGN_CENTER, 0, 0);


    lv_arc_set_range(obj1, 0, 100);


    lv_arc_set_value(obj1, 20);


    lv_obj_add_event_cb(obj1, arcEventHandle, LV_EVENT_VALUE_CHANGED, NULL);


 


static void arcEventHandle(lv_event_t* e)


{


    lv_event_code_t code = lv_event_get_code(e);


    lv_obj_t* obj = lv_event_get_target(e);


    if (code == LV_EVENT_VALUE_CHANGED)


    {


        lv_label_set_text_fmt(label1, "%d", lv_arc_get_value(obj));


    }


}

完整示例

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105



//温度背景圆圈


    lv_obj_t *cont = lv_arc_create(par);


    lv_obj_align_to(cont, par, LV_ALIGN_TOP_LEFT, 10, 10);


    lv_obj_remove_style_all(cont);


    //大小


    lv_obj_set_size(cont, 200, 200);//LV_HOR_RES


    //圆圈角度


    lv_arc_set_bg_start_angle(cont, 0);//开始角度


    lv_arc_set_bg_angles(cont, 0, 360);//角度范围





    //取值范围


    //lv_arc_set_range


    //清除Knob显示


    lv_obj_remove_style(cont, NULL, LV_PART_KNOB);


    //禁止点击调整值


    lv_obj_clear_flag(cont, LV_OBJ_FLAG_CLICKABLE);


    //修改圆环前景色


    lv_obj_set_style_arc_color(cont, lv_color_hex(0xffffff), LV_PART_INDICATOR);


    //修改圆环背景色


    lv_obj_set_style_arc_color(cont, lv_color_hex(0xffffff), LV_PART_MAIN);


    //修改圆弧末端形态


    lv_obj_set_style_arc_rounded(cont, false, LV_PART_MAIN);


    //LV_PART_MAIN对应圆弧的背景，而LV_PART_INDICATOR对应圆弧的前景。


    //修改圆弧透明度


    lv_obj_set_style_arc_color(cont, lv_color_hex(0xffffff), LV_PART_MAIN);


    lv_obj_set_style_arc_color(cont, lv_color_hex(0xffffff), LV_PART_INDICATOR);


    lv_obj_set_style_arc_opa(cont, LV_OPA_0, LV_PART_INDICATOR);


    //修改圆弧宽度


    lv_obj_set_style_arc_width(cont, 10, LV_PART_MAIN);


    //lv_obj_set_style_radius(cont, 150, 0);


    //要使圆弧不可调整，请移除旋钮的样式并使对象不可点击


    lv_obj_remove_style(cont, NULL, LV_PART_KNOB);


    lv_obj_clear_flag(cont, LV_OBJ_FLAG_CLICKABLE);


    lv_obj_set_y(cont, 50);


    lv_obj_set_x(cont, LV_HOR_RES - 305);