【LVGL-圆弧部件】

■ LVGL-圆弧部件

■ LVGL-圆弧部件旋转设置

lv_arc_set_rotation(arc, 180); /* 旋转 180 度*/
圆弧部件旋转是指将整个部件沿顺时针方向旋转某个角度， 注意： 旋转的角度为相对值（增量），它的范围是 0~360 度，旋转中心为圆弧的中心。圆弧旋转的示意图如下（旋转180度）：
由上图可知，该圆弧旋转了 180 度，值得注意的是，圆弧旋转后，它的角度划分（绝对度数）就会发生变化。

void lv_mainstart(void)
{
	lv_obj_t* arc = lv_arc_create(lv_scr_act());
	lv_arc_set_bg_angles(arc, 135, 45);
	lv_arc_set_angles(arc, 135, 270);
	lv_arc_set_rotation(arc, 180); /* 旋转 180 度*/ 
	lv_obj_set_size(arc, 200, 200);

■ LVGL-圆弧的模式选择

默认情况下，圆弧部件是沿顺时针方向绘制的，如果用户需要修改绘制的方向，可以调用 lv_arc_set_mode 函数，设置圆弧的绘制模式，圆弧模式相关的枚举如下所示：
① LV_ARC_MODE_NORMAL：顺时针方向绘制；
② LV_ARC_MODE_REVERSE：逆时针方向绘制；
③ LV_ARC_MODE_SYMMETRIC：从中间点开始绘制到当前值。

■ LVGL-圆弧部件的变化率设置

当圆弧的旋钮被滑动时，前景弧将根据设定的变化率来绘制。变化率的单位为：度/秒，
用户可调用 lv_arc_set_change_rage 函数设置变化率。

■ LVGL-圆弧部件-移除旋钮

当我们将圆弧作为进度指示器或者参数指示器来使用时，则需要移除它的旋钮，并清除可

lv_obj_t *arc = lv_arc_create(lv_scr_act());
lv_obj_remove_style(arc, NULL,LV_PART_KNOB);
/* 移除旋钮 */
lv_obj_clear_flag(arc, LV_OBJ_FLAG_CLICKABLE); /* 清除可点击属性 */
lv_obj_center(arc);

■ LVGL-圆弧部件-清除可点击属性

lv_obj_t *arc = lv_arc_create(lv_scr_act());
lv_obj_remove_style(arc, NULL,LV_PART_KNOB);
/* 移除旋钮 */
lv_obj_clear_flag(arc, LV_OBJ_FLAG_CLICKABLE); /* 清除可点击属性 */
lv_obj_center(arc);

■ LVGL-圆弧部件-事件

LV_EVENT_VALUE_CHANGED：圆弧的值发生变化；
LV_ARC_DRAW_PART_BACKGROUND：绘制背景弧线；
LV_ARC_DRAW_PART_FOREGROUND：绘制前景弧线；
LV_ARC_DRAW_PART_KNOB ：绘制旋钮。

■ LVGL-圆弧部件- API 函数

lv_arc_create() 创建圆弧对象
lv_arc_set_start_angle() 设置前景弧的起始角度
lv_arc_set_end_angle() 设置前景弧的结束角度
lv_arc_set_angles() 设置前景弧的开始和结束角度
lv_arc_set_bg_start_angle() 设置背景弧的起始角度
lv_arc_set_bg_end_angle() 设置背景弧的结束角度
lv_arc_set_bg_angles() 设置背景弧的起止和结束角度
lv_arc_set_rotation() 设置圆弧的旋转
lv_arc_set_mode() 设置圆弧的模式
lv_arc_set_value() 设置圆弧当前值
lv_arc_set_range() 设置圆弧范围
lv_arc_set_change_rate() 设置变化率
lv_arc_get_angle_start() 获取前景弧的起始角度
lv_arc_get_angle_end() 获取前景弧的结束角度
lv_arc_get_bg_angle_start() 获取背景弧的起始角度
lv_arc_get_bg_angle_end() 获取背景弧的结束角度
lv_arc_get_value() 获取圆弧的当前值
lv_arc_get_min_value() 获取圆弧的最小值
lv_arc_get_max_value() 获取圆弧的最大值
lv_arc_get_mode() 获取圆弧的模式

■ LVGL-圆弧部件-示例一：

/* 获取当前活动屏幕的宽高 */
#define scr_act_width() lv_obj_get_width(lv_scr_act())
#define scr_act_height() lv_obj_get_height(lv_scr_act())

static lv_obj_t *label_left;            /* 左侧百分比标签 */
static lv_obj_t *label_right;           /* 右侧百分比标签 */
static lv_obj_t *arc_left;              /* 左侧圆弧 */
static lv_obj_t *arc_right;             /* 右侧圆弧 */

static const lv_font_t *font;           /* 定义字体 */
static uint8_t arc_width;               /* 圆弧宽度 */
/**
 * @brief  圆弧事件回调
 * @param  *e ：事件相关参数的集合，它包含了该事件的所有数据
 * @return 无
 */
static void arc_event_cb(lv_event_t *e)
{
    lv_obj_t *target = lv_event_get_target(e);                                  /* 获取触发源 */
    lv_event_code_t code = lv_event_get_code(e);                                /* 获取事件类型 */

    if(code == LV_EVENT_VALUE_CHANGED)
    {
        lv_label_set_text_fmt(label_left, "%d%%", lv_arc_get_value(target));    /* 获取当前值，更新左侧百分比标签 */
        lv_label_set_text_fmt(label_right, "%d%%", lv_arc_get_value(target));   /* 获取当前值，更新右侧百分比标签 */
        lv_arc_set_value(arc_right, lv_arc_get_value(target));                  /* 获取左侧圆弧当前值，更新右侧圆弧当前值 */
    }
}

/**
 * @brief  左侧圆弧
 * @param  无
 * @return 无
 */
void lv_example_arc1(void)
{
    /* 根据活动屏幕宽度选择字体 */
    if (scr_act_width() <= 480)
    {
        font = &lv_font_montserrat_14;
        arc_width = 10;
    }
    else
    {
        font = &lv_font_montserrat_30;
        arc_width = 20;
    }

    /* 左侧圆弧 */
    arc_left = lv_arc_create(lv_scr_act());                                     /* 创建圆弧 */
    lv_obj_set_size(arc_left, scr_act_height() * 3/8, scr_act_height() * 3/8);  /* 设置大小 */
    lv_obj_align(arc_left, LV_ALIGN_CENTER, -scr_act_width()/5, 0);             /* 设置位置 */
    lv_arc_set_value(arc_left, 0);                                              /* 设置当前值 */
    lv_obj_set_style_arc_width(arc_left, arc_width, LV_PART_MAIN);              /* 设置背景弧宽度 */
    lv_obj_set_style_arc_width(arc_left, arc_width, LV_PART_INDICATOR);         /* 设置前景弧宽度 */
    lv_obj_add_event_cb(arc_left, arc_event_cb, LV_EVENT_VALUE_CHANGED, NULL);  /* 添加事件 */

    /* 左侧百分比标签 */
    label_left = lv_label_create(lv_scr_act());                                 /* 创建百分比标签 */
    lv_obj_align(label_left, LV_ALIGN_CENTER, -scr_act_width()/5, 0);           /* 设置位置 */
    lv_label_set_text(label_left, "0%");                                        /* 设置文本 */
    lv_obj_set_style_text_font(label_left, font, LV_STATE_DEFAULT);             /* 设置字体 */
}

/**
 * @brief  右侧圆弧
 * @param  无
 * @return 无
 */
void lv_example_arc2(void)
{
    /* 右侧圆弧 */
    arc_right = lv_arc_create(lv_scr_act());                                    /* 创建圆弧 */
    lv_obj_set_size(arc_right, scr_act_height() * 3/8, scr_act_height() * 3/8); /* 设置大小 */
    lv_obj_align(arc_right, LV_ALIGN_CENTER, scr_act_width()/5, 0);             /* 设置位置 */
    lv_arc_set_value(arc_right, 0);                                             /* 设置当前值 */
    lv_arc_set_bg_angles(arc_right, 0, 360);                                    /* 设置背景弧角度 */
    lv_arc_set_rotation(arc_right, 270);                                        /* 设置旋转角度 */
    lv_obj_remove_style(arc_right, NULL, LV_PART_KNOB);                         /* 去除旋钮 */
    lv_obj_clear_flag(arc_right, LV_OBJ_FLAG_CLICKABLE);                        /* 去除可点击属性 */
    lv_obj_set_style_arc_width(arc_right, arc_width, LV_PART_MAIN);             /* 设置背景弧宽度 */
    lv_obj_set_style_arc_width(arc_right, arc_width, LV_PART_INDICATOR);        /* 设置前景弧宽度 */

    /* 右侧百分比标签 */
    label_right = lv_label_create(lv_scr_act());                                /* 创建百分比标签 */
    lv_obj_align(label_right, LV_ALIGN_CENTER, scr_act_width()/5, 0);           /* 设置位置 */
    lv_label_set_text(label_right, "0%");                                       /* 设置文本 */
    lv_obj_set_style_text_font(label_right, font, LV_STATE_DEFAULT);            /* 设置字体 */
}