ESP32 LVGL8.1 ——arc 圆弧 (arc 19)
提示:本博客作为学习笔记,有错误的地方希望指正
文章目录
一、arc 简介
1.1概述 Overview
在前面的样式风格钟,我们学习了一些关于弧的样式设置,包括设置弧的宽度、末端形状、颜色、颜色过滤色、以及透明度和背景图片等等,这里主要是讲述arc弧对象的一些属性。
弧由背景弧和前景弧组成。前(示功)弧可通过手指调节。
1.2部分和风格 Parts and Styles
1.LV_PART_MAIN使用典型的背景样式属性绘制背景,使用弧样式属性绘制弧线。弧的大小和位置将遵守填充样式的属性。
2.LV_PART_INDICATOR使用弧线样式属性绘制其他弧线。它的填充值是相对于背景弧来解释的。
3.LV_PART_KNOBIt在指示器的末端绘制一个手柄。它使用所有的背景属性和填充值。零填充旋钮的大小与指示器的宽度相同。更大的填充使它更大,更小的填充使它更小。
1.3使用 Usage
1.3.1 值和角度 Value and range
lv_arc_set_value(arc, new_value)可以设置一个新值。这个值被解释为一个范围(最小值和最大值),可以用lv_arc_set_range(arc, min, max)修改。默认范围为1…100。
指示圆弧画在主部件的电弧上。也就是说,如果阀门设置为最大,指示弧将覆盖整个“背景”弧。使用
lv_arc_set_bg_angles(arc, start_angle, end_angle)函数或lv_arc_set_bg_start/end_angle(arc,
start_angle)来设置背景弧线的开始和结束角度。
零度是在中间的右(3点钟方向)的对象和度是增加顺时针方向。角度应该在[0;360]范围内
1.3.2 旋转 Rotation
可以使用lv_arc_set_rotation(arc, deg)添加到0度位置的偏移量。
1.3.3 模式 Mode
弧可以是以下方式之一:
LV_ARC_MODE_NORMAL指示弧从最小值绘制到当前。
LV_ARC_MODE_REVERSE指示弧从最大值到电流呈逆时针方向绘制。.
LV_ARC_MODE_SYMMETRICAL从中点到当前值绘制指示弧。
该模式可以通过lv_arc_set_mode(arc, LV_ARC_MODE_⋯)设置,并且仅当角度由lv_arc_set_value()设置或通过手指调节弧度时使用。
1.3.4 改变速率 Change rate
如果按下圆弧,电流值将根据设定的变化率限制速度。变化率以度数/秒为单位定义,可以使用
lv_arc_set_change_rage(arc, rate)设置。
1.3.4 手动设置指标 Setting the indicator manually
也可以使用lv_arc_set_angles(arc, start_angle, end_angle)函数直接设置指示弧的角度,或者
lv_arc_set_start/end_angle(arc, start_angle)设置指示弧的角度。在这种情况下,设置的“value”和“mode”将被忽略。
换句话说,设置角度和值是独立的。你应该使用值和角度设置。将两者混合可能会导致意想不到的行
为。要使圆弧不可调节,移除旋钮的样式,使对象不可点击:
lv_obj_remove_style(arc, NULL, LV_PART_KNOB); //移除所有样式
lv_obj_clear_flag(arc, LV_OBJ_FLAG_CLICKABLE); //添加标志位
1.4事件 Events
LV_EVENT_VALUE_CHANGED 当按下/拖动弧线设置新值时发送。
LV_EVENT_DRAW_PART_BEGIN and LV_EVENT_DRAW_PART_END发送背景矩形,背景弧,前景弧和旋钮,以允许挂钩的绘图。有关背景矩形部分的更多细节,请参阅Base对象的文档。lv_obj_draw_dsc_t的字段设置如下:
对于这两个弧:clip_area, p1(弧中心),半径,arc_dsc, part。
旋钮:clip_area., draw_area, rect_dsc, part。
1.5按键 Keys
LV_KEY_RIGHT/UP将值增加1。
LV_KEY_LEFT/DOWN 将值减少1。
二、arc API
void lv_arc_set_start_angle(lv_obj_t * arc, uint16_t start); //设置圆弧的起始角度。0度:右,90度下等。
void lv_arc_set_end_angle(lv_obj_t * arc, uint16_t end); //设置弧的结束角度。0度:右,90度下等。
void lv_arc_set_angles(lv_obj_t * arc, uint16_t start, uint16_t end); //设置起始和结束角度
void lv_arc_set_bg_start_angle(lv_obj_t * arc, uint16_t start); //设置弧背景的起始角度。0度:右,90度下等。
void lv_arc_set_bg_end_angle(lv_obj_t * arc, uint16_t end); //设置弧背景的起始角度。0度:右,90度下等。
void lv_arc_set_bg_angles(lv_obj_t * arc, uint16_t start, uint16_t end);//设置弧背景的起始角和结束角
void lv_arc_set_rotation(lv_obj_t * arc, uint16_t rotation); //设置整个弧线的旋转
void lv_arc_set_mode(lv_obj_t * arc, lv_arc_mode_t type); //设置圆弧类型。
void lv_arc_set_value(lv_obj_t * arc, int16_t value); //在弧线上设置一个新值
void lv_arc_set_range(lv_obj_t * arc, int16_t min, int16_t max); //设置圆弧的最大值和最小值
void lv_arc_set_change_rate(lv_obj_t * arc, uint16_t rate); //设置一个变化率来限制电弧到达压下点的速度。
uint16_t lv_arc_get_angle_start(lv_obj_t * obj); //获取弧的起始角度。
uint16_t lv_arc_get_angle_end(lv_obj_t * obj); //获取弧的结束角。
uint16_t lv_arc_get_bg_angle_start(lv_obj_t * obj); //获取弧背景的起始角度。
uint16_t lv_arc_get_bg_angle_end(lv_obj_t * obj); //获取弧背景的结束角度。
int16_t lv_arc_get_value(const lv_obj_t * obj); //获取弧的值
int16_t lv_arc_get_min_value(const lv_obj_t * obj); //获取弧的最小值
int16_t lv_arc_get_max_value(const lv_obj_t * obj); //获取弧线的最大值
lv_arc_mode_t lv_arc_get_mode(const lv_obj_t * obj); //获取弧线是否为type类型。
三、示例
3.1实现基本显示
/*************************************************
* 函数名称 : arc_show_1
* 参 数 : 无
* 函数功能 : 圆弧示例一 默认的初始角度值为100
*************************************************/
void arc_show_1()
{
lv_obj_t * arc = lv_arc_create(lv_scr_act()); //创建圆弧对象
lv_obj_set_size(arc,150,150); //设置尺寸
lv_arc_set_rotation(arc,180); //设置零度位置
lv_arc_set_bg_angles(arc,0,180); //设置角度
lv_arc_set_value(arc,40); //设置初始值
lv_obj_center(arc); //居中显示
}
3.2示例实现动画显示
static void set_angle(void * obj,int32_t v)
{
lv_arc_set_value(obj,v);
}
/*************************************************
* 函数名称 : arc_show_2
* 参 数 : 无
* 函数功能 : 圆弧示例二
*************************************************/
void arc_show_2()
{
lv_obj_t * arc = lv_arc_create(lv_scr_act());//创建圆弧对象
lv_arc_set_rotation(arc,0); //设置零度位置
lv_arc_set_bg_angles(arc,0,360); //设置角度
lv_arc_set_range(arc,0,360);
lv_arc_set_change_rate(arc,1);
lv_obj_remove_style(arc,NULL,LV_PART_KNOB); //移除样式
lv_obj_clear_flag(arc,LV_OBJ_FLAG_CLICKABLE);//清除标志位
lv_obj_center(arc); //居中显示
lv_anim_t a; //创建动画对象
lv_anim_init(&a); //初始化对象
lv_anim_set_var(&a,arc); //绑定动画对象
lv_anim_set_exec_cb(&a,set_angle); //设置回调
lv_anim_set_time(&a,10000); //设置时间
lv_anim_set_repeat_count(&a,LV_ANIM_REPEAT_INFINITE); //设置重复
lv_anim_set_repeat_delay(&a,500); //设置重复延时
lv_anim_set_values(&a,0,360); //设置动画的开始和结束值
lv_anim_start(&a); //开始动画
}
更多推荐
所有评论(0)