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

文章目录

- 前言
- 主体介绍
- - 1. **基本构造与样式**
  - - 设置背景和指示器
    - 设置旋钮样式
  - 2. **值与范围**
  - 3. **角度设置**
  - - 设置背景弧线的角度
    - 设置指示器的角度
  - 4. **模式切换**
  - 5. **旋钮偏移**
  - 6. **事件与交互**
  - - 值变化事件
  - 7. **高级功能**
  - - 点击测试
    - 动态绑定对象
- 总结
- - 完整示例

前言

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

主体介绍

1. 基本构造与样式

lv_arc 由三个部分组成：

背景弧线 (LV_PART_MAIN)：主弧线，用于显示完整范围。
指示器弧线 (LV_PART_INDICATOR)：显示当前值的弧线。
旋钮 (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 提供三种模式：

LV_ARC_MODE_NORMAL（默认）：指示器从最小值到当前值绘制。
LV_ARC_MODE_REVERSE：指示器从最大值逆时针绘制到当前值。
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();}
}