使用lvgl 9 的 Arc (lv_arc) 入门指南

---

前言

在图形用户界面 (GUI) 开发中，圆弧是一种常用的控件，可以直观地显示数值范围内的当前状态，比如进度条、调节旋钮等。在 LittlevGL（lvgl）中，lv_arc 提供了强大的功能，不仅支持丰富的样式和事件，还允许用户通过触摸或程序调整其值。本文将详细介绍 lv_arc 的用法，帮助您快速上手。

---

主体介绍

1. 基本构造与样式

lv_arc 由三个部分组成：

1. 背景弧线 (LV_PART_MAIN)：主弧线，用于显示完整范围。
2. 指示器弧线 (LV_PART_INDICATOR)：显示当前值的弧线。
3. 旋钮 (LV_PART_KNOB)：一个可调整的把手，用于用户交互。

设置背景和指示器

背景弧线和指示器弧线的样式通过 lv_style 属性控制。以下是创建一个基本 Arc 的示例：

lv_obj_t *arc = lv_arc_create(lv_scr_act()); // 创建 Arc
lv_obj_set_size(arc, 150, 150);             // 设置大小
lv_arc_set_bg_angles(arc, 0, 360);          // 背景弧线范围
lv_arc_set_value(arc, 50);                  // 当前值

设置旋钮样式

通过调整 padding 属性，可以改变旋钮的大小：

lv_obj_set_style_pad_all(arc, 5, LV_PART_KNOB); // 旋钮大小

---

2. 值与范围

Arc 的值可以通过以下函数设置：

• 函数原型：void lv_arc_set_value(lv_obj_t *arc, int32_t value);

• 功能：设置当前值。

• 函数原型：void lv_arc_set_range(lv_obj_t *arc, int32_t min, int32_t max);

• 功能：设置值的最小值和最大值。

示例：

lv_arc_set_range(arc, 0, 100); // 设置范围
lv_arc_set_value(arc, 75);     // 设置当前值为 75

---

3. 角度设置

设置背景弧线的角度

• 函数原型：void lv_arc_set_bg_angles(lv_obj_t *arc, uint16_t start_angle, uint16_t end_angle);
• 功能：设置背景弧线的起始和结束角度。

示例：

lv_arc_set_bg_angles(arc, 0, 270); // 设置背景从 0° 到 270°

设置指示器的角度

• 函数原型：void lv_arc_set_angles(lv_obj_t *arc, uint16_t start_angle, uint16_t end_angle);
• 功能：直接设置指示器弧线的起始和结束角度。

示例：

lv_arc_set_angles(arc, 0, 180); // 设置指示器从 0° 到 180°

---

4. 模式切换

Arc 提供三种模式：

1. LV_ARC_MODE_NORMAL（默认）：指示器从最小值到当前值绘制。
2. LV_ARC_MODE_REVERSE：指示器从最大值逆时针绘制到当前值。
3. LV_ARC_MODE_SYMMETRICAL：指示器从中心点绘制到当前值。

• 函数原型：void lv_arc_set_mode(lv_obj_t *arc, lv_arc_mode_t mode);
• 功能：设置模式。

示例：

lv_arc_set_mode(arc, LV_ARC_MODE_REVERSE); // 逆时针模式

---

5. 旋钮偏移

通过旋钮偏移，可以改变旋钮的显示位置：

• 函数原型：void lv_arc_set_knob_offset(lv_obj_t *arc, uint16_t offset_angle);
• 功能：设置旋钮的偏移角度。

示例：

lv_arc_set_knob_offset(arc, 30); // 将旋钮偏移 30°

---

6. 事件与交互

值变化事件

Arc 支持 LV_EVENT_VALUE_CHANGED 事件，用于响应值的更改。

void arc_event_cb(lv_event_t *e) {
    lv_obj_t *arc = lv_event_get_target(e);
    int32_t value = lv_arc_get_value(arc);
    printf("Arc value changed: %d\n", value);
}

lv_obj_add_event_cb(arc, arc_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

---

7. 高级功能

点击测试

通过 LV_OBJ_FLAG_ADV_HITTEST，可以设置点击区域为弧线区域：

lv_obj_add_flag(arc, LV_OBJ_FLAG_ADV_HITTEST);

动态绑定对象

可以绑定一个对象使其跟随 Arc 的旋转：

• 函数原型：void lv_arc_align_obj_to_angle(lv_obj_t *arc, lv_obj_t *obj, int16_t radius_offset);

示例：

lv_obj_t *label = lv_label_create(lv_scr_act());
lv_label_set_text(label, "Knob");
lv_arc_align_obj_to_angle(arc, label, 10); // 让 label 跟随 Arc 的角度变化

---

总结

通过本文的介绍，我们了解了 LittlevGL 中 Arc 控件的功能及用法，包括基础样式、值设置、角度控制、模式切换以及事件处理。以下是完整的示例代码：

完整示例

#include "lvgl.h"

void arc_event_cb(lv_event_t *e) {
    lv_obj_t *arc = lv_event_get_target(e);
    int32_t value = lv_arc_get_value(arc);
    printf("Current Value: %d\n", value);
}

void create_arc_demo() {
    lv_obj_t *arc = lv_arc_create(lv_scr_act());
    lv_obj_set_size(arc, 150, 150);
    lv_arc_set_range(arc, 0, 100);
    lv_arc_set_value(arc, 50);
    lv_arc_set_bg_angles(arc, 0, 270);
    lv_arc_set_knob_offset(arc, 10);
    lv_obj_add_event_cb(arc, arc_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}

int main() {
    lv_init();
    create_arc_demo();
    while (1) {
        lv_task_handler();
    }
}

通过这段代码，您可以在设备上显示一个可交互的 Arc，并处理值变化事件。希望本文能够帮助您熟练掌握 lv_arc 的使用！

原文地址：https://blog.csdn.net/m0_62599305/article/details/144297842

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！