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);                           //开始动画   
}