| **银杏科技有限公司旗下技术文档发布平台** ||||
|技术支持电话|**0379-69926675-801**|||
|技术支持邮件|Gingko@vip.163.com|||
^ 版本 ^ 日期 ^ 作者 ^ 修改内容 ^
| V1.0 | 2020-12-5 | yang | 初次建立 |
===== 实验十五:lv_arc弧形指示器 =====
==== 一、弧形指示器 ====
弧形指示器由背景弧和前景弧组成。两者都具有起始角度和终止角度以及厚度。
弧的主要部分称为 **LV_ARC_PART_MAIN** 。它使用典型的背景样式属性绘制背景,并使用线型样式绘制圆弧。圆弧的大小和位置将遵守填充样式的属性。
**LV_ARC_PART_INDIC** 是虚拟小部件,它使用线型样式绘制了另一个弧,是与背景弧线区域重叠的。指示器圆弧的半径将根据最大填充值进行修改。
**LV_ARC_PART_KNOB** 是虚拟小部件,它是绘制在弧形指示器末端的旋钮。设置其为零填充时,旋钮的大小与指示器的宽度相同。较大的填充使其尺寸变大,较小的填充使其尺寸变小。
==== 二、角度范围与值 ====
要设置弧形指示器的背景圆弧角度,使用 **lv_arc_set_bg_angles(arc, start_angle, end_angle)** 或 **lv_arc_set_bg_start/end_angle(arc, start_angle)** 功能。零度位于弧形指示器的右中间(3点钟)位置,并且度数沿顺时针方向增加。角度应在 **[0,360]** 范围内。
同样,设置指示器前景圆弧的角度可以使用 **lv_arc_set_angles(arc, start_angle, end_angle)** 或者 **lv_arc_set_start/end_angle(arc, start_angle)** 。
使用函数 lv_arc_set_rotation(arc, deg) 可以将弧形指示器整体顺时针偏转 deg 度。
除了手动设置角度外,弧还可以设置范围值和当前值。要设置范围请使用 **lv_arc_set_range(arc, min, max)** ,设置当前值请使用 **lv_arc_set_value(arc, value)** ,当前值只能在范围值之间变化。
{{ :icore4t:icore4t_rtt_lvgl_15_1.png?direct |}}
void lv_gui_run(void){
lvgl2rtt_init("lcd"); /* 初始化lvgl2rtt */
lv_obj_t * arc1 = lv_arc_create(lv_scr_act(), NULL); /* 创建arc1 */
lv_obj_set_size(arc1, 150, 150); /* 设置尺寸 */
lv_arc_set_bg_angles(arc1, 0, 360); /* 设置背景弧角度范围 */
lv_arc_set_angles(arc1, 90, 200); /* 设置前景弧角度 */
lv_obj_align(arc1, NULL, LV_ALIGN_CENTER, -100, 0); /* 设置位置 */
lv_obj_t * arc2 = lv_arc_create(lv_scr_act(), NULL); /* 创建arc2 */
lv_obj_set_size(arc2, 150, 150); /* 设置尺寸 */
lv_arc_set_bg_angles(arc2, 135, 45); /* 设置背景弧角度范围 */
lv_arc_set_angles(arc2, 135, 180); /* 设置前景弧角度 */
lv_obj_align(arc2, NULL, LV_ALIGN_CENTER, 100, 0); /* 设置位置 */
}
==== 三、类型 ====
函数 **lv_arc_set_type(arc, type)** 可以将弧形指示器设置为不同的“类型”。样式有以下几种类型:
* **LV_ARC_TYPE_NORMAL** 指示器前景弧沿顺时针绘制。
* **LV_ARC_TYPE_REVERSE** 指示器前景弧沿逆时针方向绘制。
* **LV_ARC_TYPE_SYMMETRIC** 从中间点到当前值的指示弧线。
{{ :icore4t:icore4t_rtt_lvgl_15_2.png?direct |}}
void lv_gui_run(void){
lvgl2rtt_init("lcd"); /* 初始化lvgl2rtt */
lv_obj_t * arc1 = lv_arc_create(lv_scr_act(), NULL); /* 创建arc */
lv_obj_set_size(arc1, 150, 150); /* 设置尺寸 */
lv_arc_set_bg_angles(arc1, 0, 360); /* 设置背景弧范围 */
lv_obj_align(arc1, NULL, LV_ALIGN_CENTER, -100, 0); /* 设置位置 */
lv_arc_set_type(arc1, LV_ARC_TYPE_NORMAL); /* 设置类型 */
lv_obj_t * arc2 = lv_arc_create(lv_scr_act(), NULL); /* 创建arc */
lv_obj_set_size(arc2, 150, 150); /* 设置尺寸 */
lv_arc_set_bg_angles(arc2, 0, 360); /* 设置背景弧范围 */
lv_obj_align(arc2, NULL, LV_ALIGN_CENTER, 100, 0); /* 设置位置 */
lv_arc_set_type(arc2, LV_ARC_TYPE_REVERSE); /* 设置类型 */
}
==== 四、事件 ====
除了通用事件外,弧形指示器还发送以下特殊事件:
* **LV_EVENT_VALUE_CHANGED** 当按下/拖动弧以设置新值时发送。
若只想把弧形指示器作为数值显示器的话,可以使用 **lv_obj_set_click(arc, false)** 禁用对象单击,然后使用 **lv_arc_set_value(arc, new_value)** 来设置角度值。
{{ :icore4t:icore4t_rtt_lvgl_15_3.gif?direct |}}
lv_obj_t * arc; /* 先定义弧形指示器 */
lv_obj_t * label; /* 先定义标签label */
static void event_handler(lv_obj_t * obj, lv_event_t event) /* 回调函数 */
{
if(event == LV_EVENT_VALUE_CHANGED) { /* 指示器值改变的话 */
lv_label_set_text_fmt(label, "%d",lv_arc_get_value(arc));
} /* 更新标签文本 */
}
void lv_gui_run(void){
lvgl2rtt_init("lcd"); /* 初始化lvgl2rtt */
arc = lv_arc_create(lv_scr_act(), NULL); /* 创建arc */
lv_obj_set_size(arc, 150, 150); /* 设置尺寸 */
lv_obj_align(arc, NULL, LV_ALIGN_CENTER, 0, 0); /* 设置位置 */
lv_obj_set_event_cb(arc, event_handler); /* 设置回调函数 */
label = lv_label_create(arc, NULL); /* 为指示器创建标签 */
lv_obj_align(label, arc, LV_ALIGN_CENTER, 0, 0); /* 设置位置 */
lv_label_set_text(label, "0"); /* 设置初始内容 */
}