用GUI画个弧？走起！LVGL『Arc弧控件』介绍走起

一. LVGL GUI弧控件介绍

弧由背景弧和前景弧组成。两者都可以具有起始角度和终止角度以及厚度。以下这个就是弧控件的最简单的效果：

二. LVGL GUI弧小部件和样式

弧的主要部分称为 LV_ARC_PART_MAIN 。它使用典型的背景样式属性绘制背景，并使用线型属性绘制圆弧。圆弧的大小和位置将遵守填充样式的属性。
LV_ARC_PART_INDIC 是虚拟小部件，它使用线型属性绘制了另一个弧。它的填充值是相对于背景弧线解释的。指示器圆弧的半径将根据最大填充值进行修改。
LV_ARC_PART_KNOB 是虚拟小部件，它绘制在弧形指示器的末端。它使用所有背景属性和填充值。使用零填充时，旋钮的大小与指示器的宽度相同。较大的填充使其较大，较小的填充使其较小。

三. LVGL GUI弧控件的使用

1. 角度(Angles)

零度位于对象的右中间（3 点钟） ，并且度数沿顺时针方向增加。角度应在[0:360]范围内

用这个函数lv_arc_set_bg_angles(arc, start_angle, end_angle)或者lv_arc_set_bg_start/end_angle(arc, start_angle)来设置背景角度

用这个函数lv_arc_set_angles(arc, start_angle, end_angle)或者lv_arc_set_start/end_angle(arc, start_angle)来设置指示器的角度

用代码体验下效果

void lvgl_arc_angle_test(void)
{
    /*Create an Arc*/
    lv_obj_t* arc = lv_arc_create(lv_scr_act(), NULL);
    lv_arc_set_bg_angles(arc,180,360);
    lv_arc_set_angles(arc, 180, 270);
    lv_obj_set_size(arc, 200, 200);
    lv_obj_align(arc, NULL, LV_ALIGN_CENTER, 0, 0);
}

可以看到背景的角度是从180度到360度，前景指示器是从180度到270度

2. 旋转(Rotation)

用这个函数旋转lv_arc_set_rotation(arc, deg)，我们来用代码体验下效果，代码是基于上面的例子修改而来，就加了一行代码

void lvgl_arc_rotation_test(void)
{
    /*Create an Arc*/
    lv_obj_t* arc = lv_arc_create(lv_scr_act(), NULL);
    lv_arc_set_bg_angles(arc, 180, 360);
    lv_arc_set_angles(arc, 180, 270);
    lv_arc_set_rotation(arc, 180);
    lv_obj_set_size(arc, 200, 200);
    lv_obj_align(arc, NULL, LV_ALIGN_CENTER, 0, 0);
}

3. 范围跟值(Range and values)

除了把背景给前景指示器写死之外，还有另外一种方法就是通过范围跟值来自动生成

我们来用代码实现一个范围0-100，设置值为90的，代码奉上

void lvgl_arc_range_value_test(void)
{
    /*Create an Arc*/
    lv_obj_t* arc = lv_arc_create(lv_scr_act(), NULL);
    lv_arc_set_range(arc, 0, 100);
    lv_arc_set_value(arc, 90);
    lv_obj_set_size(arc, 200, 200);
    lv_obj_align(arc, NULL, LV_ALIGN_CENTER, 0, 0);
}

4. 类型(Type)

默认的弧控件方向是顺时针，但是类型可以改变，有以下值：

• LV_ARC_TYPE_NORMAL indicator arc drawn clockwise (min to current)

• LV_ARC_TYPE_REVERSE indicator arc drawn counter clockwise (max to current)

• LV_ARC_TYPE_SYMMETRIC indicator arc drawn from the middle point to the current value.

5. 事件(Events)

除了有基本的时间之外，弧空间的特殊属性是LV_EVENT_VALUE_CHANGED 

使用这个之前，有一个函数需要调用，就是设置弧控件可以调节lv_arc_set_adjustable。

函数原形为：

上代码，看效果图：

void lvgl_arc_event_test(void)
{
    /*Create an Arc*/
    lv_obj_t* arc = lv_arc_create(lv_scr_act(), NULL);
    lv_arc_set_range(arc, 0, 100);
    lv_arc_set_value(arc, 0);
    lv_obj_set_size(arc, 200, 200);
    lv_obj_align(arc, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_arc_set_adjustable(arc, true);
    lv_obj_set_event_cb(arc, arc_event_handler);
}

整个弧控件还是相对简单的，内容就到这里了！

好了，完结了，更多精彩继续戳↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓