LVGL- 圆弧形状控件

1 圆弧（ARH）背景介绍

ARC 是 LVGL 中用于显示圆弧形状的控件，广泛应用于需要可视化表示数值或状态的场景，

1.1 主要功能

1. 可设置开始角度与结束角度

2. 支持顺时针或逆时针方向

3. 支持可拖动的 knob（控制点）

4. 可显示当前值的数值标签

5. 支持样式设置（颜色、宽度、背景、动画等）

1.2 应用场景

2 相关函数应用

2.1 创建与设置

lv_obj_t * lv_arc_create(lv_obj_t * parent);

创建一个 arc 控件，添加到指定父对象中。

2.2 值范围与设置

void lv_arc_set_range(lv_obj_t * arc, int32_t min, int32_t max);
void lv_arc_set_value(lv_obj_t * arc, int32_t value);
int32_t lv_arc_get_value(lv_obj_t * arc);

设置数值的最小值、最大值，以及当前值。

lv_arc_set_range(arc, 0, 100);        // 设置数值范围
lv_arc_set_value(arc, 40);            // 设置当前值
lv_obj_center(arc);                   // 居中显示

2.3 弧线范围（角度）

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

设置弧的开始与结束角度（以度为单位，0~360）。
0 度在正右侧（水平向右），角度按 顺时针 增加
如果 start > end，系统会理解为从 start 顺时针绕一圈到 end

lv_arc_set_angles(arc, 0, 180);
lv_arc_set_bg_angles(arc, 0, 180);

2.4 旋转 角度

lv_arc_set_rotation() 设置 arc 控件的整体旋转角度，也就是说，它会旋转整张弧形图像，包括：

1. 背景弧线
2. 指示弧线
3. 交互起点

void lv_arc_set_rotation(lv_obj_t * arc, uint16_t rotation);

lv_arc_set_rotation(arc, 180);

2.5 模式设置

lv_arc_set_mode() — 设置 LVGL arc 控件的模式（显示方式）

void lv_arc_set_mode(lv_obj_t * arc, lv_arc_mode_t mode);

模式选择

typedef enum {
    LV_ARC_MODE_NORMAL,       // 正常模式，值从 start → end 增加
    LV_ARC_MODE_REVERSE,      // 反向模式，值从 end → start 增加
    LV_ARC_MODE_SYMMETRICAL   // 对称模式，弧线在中间对称展开
} lv_arc_mode_t;

2.5.1 LV_ARC_MODE_NORMAL

指示弧线从 start 角度 向顺时针方向增加到 end。
适合用作进度条或滑动条；表示值从左下 → 顺时针 → 右下。

lv_arc_set_angles(arc, 135, 45);  // 总角度范围
lv_arc_set_mode(arc, LV_ARC_MODE_NORMAL);

运行结果跟上图一样

2.5.2 LV_ARC_MODE_REVERSE

指示弧线反向绘制，从 end 向 start 增加；
视觉上从右下→逆时针→左下；
倒计时、退度进度

这个主要用于显示，不是用于交互操作的。

2.5.3 LV_ARC_MODE_SYMMETRICAL

弧线从中心点同时向两侧对称绘制
适用于一些需要“中间为零、两边对称”的场景（例如电平、音量平衡等）

lv_arc_set_mode(arc, LV_ARC_MODE_SYMMETRICAL);

3 音量调节旋钮

1.使用 LV_ARC_MODE_NORMAL

2 .拖动旋钮改变值（范围 0～100）

3. 圆形进度弧显示当前值

4. 中心显示数值 label

5. 自动更新显示

static void arc_event_cb(lv_event_t* e)
{
    lv_obj_t* arc = lv_event_get_target(e);
    int32_t val = lv_arc_get_value(arc);

    // 更新 label 显示值
    char buf[8];
    lv_snprintf(buf, sizeof(buf), "%d%%", val);
    lv_label_set_text(label_val, buf);
    lv_obj_align_to(label_val, arc, LV_ALIGN_CENTER, 0, 0);
}

void create_volume_arc(void)
{
    // 创建 arc 对象
    lv_obj_t* arc = lv_arc_create(lv_scr_act());
    lv_obj_center(arc);

    // 设置角度范围（270°）
    lv_arc_set_angles(arc, 135, 45);

    // 设置值范围
    lv_arc_set_range(arc, 0, 100);
    lv_arc_set_value(arc, 60);  // 初始值

    // 使用 NORMAL 模式（默认）
    lv_arc_set_mode(arc, LV_ARC_MODE_NORMAL);

    // 美化样式
    lv_obj_set_style_arc_width(arc, 12, LV_PART_MAIN);       // 背景弧宽
    lv_obj_set_style_arc_width(arc, 12, LV_PART_INDICATOR);  // 值弧宽
    lv_obj_set_style_arc_color(arc, lv_palette_main(LV_PALETTE_BLUE), LV_PART_INDICATOR);
    lv_obj_set_style_bg_color(arc, lv_color_black(), LV_PART_KNOB);
    lv_obj_set_style_bg_opa(arc, LV_OPA_COVER, LV_PART_KNOB);

    // 启用可点击
    lv_obj_add_flag(arc, LV_OBJ_FLAG_CLICKABLE);
    lv_obj_add_event_cb(arc, arc_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

    // 创建中心 label 显示数值
    label_val = lv_label_create(lv_scr_act());
    lv_label_set_text(label_val, "60%");
    lv_obj_set_style_text_font(label_val, &lv_font_montserrat_28, 0);
    lv_obj_align_to(label_val, arc, LV_ALIGN_CENTER, 0, 0);
}