制作网站的详细步骤江阴便宜做网站
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);
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);
}
