圆弧由背景和前景弧组成,通过lv_arc_create创建。
lv_obj_t *obj1 = lv_arc_create(lv_scr_act());
lv_obj_align(obj1, LV_ALIGN_TOP_LEFT, 10, 10);
1. Parts
圆弧的部件包括LV_PART_MAIN,LV_PART_INDICATOR,LV_PART_KNOB。
lv_obj_set_style_bg_opa(obj1, LV_OPA_100, LV_PART_MAIN);
lv_obj_set_style_bg_color(obj1, lv_color_hex(0xFF0000), LV_PART_MAIN);
lv_obj_set_style_bg_opa(obj1, LV_OPA_100, LV_PART_INDICATOR);
lv_obj_set_style_bg_color(obj1, lv_color_hex(0x00FF00), LV_PART_INDICATOR);
lv_obj_set_style_pad_column(obj1, 40, LV_PART_INDICATOR);
lv_obj_set_style_pad_row(obj1, 40, LV_PART_INDICATOR);
lv_obj_set_style_bg_color(obj1, lv_color_hex(0x0000FF), LV_PART_KNOB);
这里没看到INDICATOR部分的显示。
2. 样式
2.1 旋转
旋转是顺时针旋转。
lv_arc_set_rotation(obj1, 90);
2.3 设置角度范围
可以通过lv_arc_set_bg_angles/lv_arc_set_bg_start_angle/lv_arc_set_bg_end_angle设置,起始范围是【0:360】。0°对应的位置是3点位置,并且沿着顺时针方向增加。
lv_arc_set_bg_angles(obj1, 0, 360);
可是这里似乎有个bug,点击一下后蓝色的Knob会跳一下。
等效的方式:
lv_arc_set_bg_start_angle(obj1, 0);
lv_arc_set_bg_end_angle(obj1, 360);
2.4 设置值范围
通过lv_arc_set_range设置值范围,值的范围和角度范围是对应的。start_angle对应range_min, end_angle对应range_max。
2.5 清除Knob显示
将KNOB的Style移除即可。
lv_obj_remove_style(obj1, NULL, LV_PART_KNOB);
2.6 禁止点击调整值
默认是可以 通过鼠标点击滑动调整值的。
lv_obj_clear_flag(arc, LV_OBJ_FLAG_CLICKABLE);
2.7 修改圆环前景色
lv_obj_set_style_arc_color(obj1, lv_color_hex(0xff0000), LV_PART_INDICATOR);
2.8 修改圆环背景色
lv_obj_set_style_arc_color(obj1, lv_color_hex(0xff0000), LV_PART_MAIN);
2.9 修改圆弧末端形态
通过lv_obj_set_style_arc_rounded可以将圆弧末端设置成圆形或者直线。
lv_obj_set_style_arc_rounded(obj1, false, LV_PART_MAIN);
2.10 修改圆弧宽度
lv_obj_set_style_arc_width(obj1, 20, LV_PART_MAIN);
同样,LV_PART_MAIN对应圆弧的背景,而LV_PART_INDICATOR对应圆弧的前景。
2.11 修改圆弧透明度
lv_obj_set_style_arc_color(obj1, lv_color_hex(0xff0000), LV_PART_MAIN);
lv_obj_set_style_arc_color(obj1, lv_color_hex(0x0000ff), LV_PART_INDICATOR);
lv_obj_set_style_arc_opa(obj1, LV_OPA_0, LV_PART_INDICATOR);
3. 事件
主要的事件是LV_EVENT_VALUE_CHANGED
lv_obj_align(obj1, LV_ALIGN_TOP_LEFT, 10, 10);
lv_obj_align(label1, LV_ALIGN_CENTER, 0, 0);
lv_arc_set_range(obj1, 0, 100);
lv_arc_set_value(obj1, 20);
lv_obj_add_event_cb(obj1, arcEventHandle, LV_EVENT_VALUE_CHANGED, NULL);
static void arcEventHandle(lv_event_t* e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t* obj = lv_event_get_target(e);
if (code == LV_EVENT_VALUE_CHANGED)
{
lv_label_set_text_fmt(label1, "%d", lv_arc_get_value(obj));
}
}
完整示例
//温度背景圆圈
lv_obj_t *cont = lv_arc_create(par);
lv_obj_align_to(cont, par, LV_ALIGN_TOP_LEFT, 10, 10);
lv_obj_remove_style_all(cont);
//大小
lv_obj_set_size(cont, 200, 200);//LV_HOR_RES
//圆圈角度
lv_arc_set_bg_start_angle(cont, 0);//开始角度
lv_arc_set_bg_angles(cont, 0, 360);//角度范围
//取值范围
//lv_arc_set_range
//清除Knob显示
lv_obj_remove_style(cont, NULL, LV_PART_KNOB);
//禁止点击调整值
lv_obj_clear_flag(cont, LV_OBJ_FLAG_CLICKABLE);
//修改圆环前景色
lv_obj_set_style_arc_color(cont, lv_color_hex(0xffffff), LV_PART_INDICATOR);
//修改圆环背景色
lv_obj_set_style_arc_color(cont, lv_color_hex(0xffffff), LV_PART_MAIN);
//修改圆弧末端形态
lv_obj_set_style_arc_rounded(cont, false, LV_PART_MAIN);
//LV_PART_MAIN对应圆弧的背景,而LV_PART_INDICATOR对应圆弧的前景。
//修改圆弧透明度
lv_obj_set_style_arc_color(cont, lv_color_hex(0xffffff), LV_PART_MAIN);
lv_obj_set_style_arc_color(cont, lv_color_hex(0xffffff), LV_PART_INDICATOR);
lv_obj_set_style_arc_opa(cont, LV_OPA_0, LV_PART_INDICATOR);
//修改圆弧宽度
lv_obj_set_style_arc_width(cont, 10, LV_PART_MAIN);
//lv_obj_set_style_radius(cont, 150, 0);
//要使圆弧不可调整,请移除旋钮的样式并使对象不可点击
lv_obj_remove_style(cont, NULL, LV_PART_KNOB);
lv_obj_clear_flag(cont, LV_OBJ_FLAG_CLICKABLE);
lv_obj_set_y(cont, 50);
lv_obj_set_x(cont, LV_HOR_RES - 305);