当前位置：首页 > news >正文

LVGL- 圆弧形状控件

news 来源：原创 2025/5/18 16:16:29

1 圆弧（ARH）背景介绍

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

1.1 主要功能

可设置开始角度与结束角度
支持顺时针或逆时针方向
支持可拖动的 knob（控制点）
可显示当前值的数值标签
支持样式设置（颜色、宽度、背景、动画等）

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);

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

2.4 旋转角度

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

背景弧线
指示弧线
交互起点

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）

圆形进度弧显示当前值
中心显示数值 label
自动更新显示

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);
}