先看效果，创建了两个Arc 弧形控件，一个可触摸拖动的默认风格，一个动画控制的自定义风格的弧形控件
ESP-IDF版本：V4.2
littleVGL版本：V7.10.0
开发板购买链接https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674
一、开发板简介
二、开发环境搭建 windows
三、基础示例
四、LVGL控件使用示例
LVGL_Arc_Test 圆弧指示器通过触摸动态改变值
LVGL_Bar_Test 通过动画方式动态演示Bar进度条的使用方法
LVGL_Button_Test 通过5种不同动态效果的按钮学习按钮的创建与使用
LVGL_ButtonMatrix_Test 创建一个计算器布局来演示矩阵按钮控件的使用
LVGL_Calendar_Test 日历控件的创建和使用
LVGL_Canvas_Test 透明画布和画一个圆角过渡色矩形旋转角度学习画布的使用
LVGL_Chart_Test 通过创建三个不同风格的图表来学习图表控件的使用
LVGL_Checkbox_Test 学习复选框控件的创建和使用
LVGL_ColorPicker_Test 创建一个颜色选择器并动态显示当前颜色的RGB值
LVGL_Container_Test 在容器控件上动态创建三个文本标签
LVGL_Drop_down_List_Test 创建三个不同类型的下拉选择控件
LVGL_Gauge_Test 创建一个动态仪表和静态多指针仪表
LVGL_Image_Test 通过四个滑动条控制图片颜色的变化学习图像控件的使用
LVGL_ImageButton_Test 创建一个图片背景的图像按钮
LVGL_Keyboard_Test 通过一个文本输入框控件还学习键盘控件的调用关闭设置
LVGL_Label_Test 创建颜色可变，长文本滚动，带阴影3D效果三个标签控件
LVGL_LED_Test 创建三个LED，学习LED控件的调光，颜色，开关的设置
LVGL_Line_Test 通过二维数组创建一段折线来演示线控件的使用
LVGL_LineMeter_Test 创建两个不同的线段弧形指示器动态展示数据
LVGL_List_Test 创建一个带图标的列表控件
LVGL_MessageBox_Test 创建一个带按钮的消息框控件
LVGL_ObjectMask_Test 创建一个变幻色的文本学习蒙版遮罩效果
LVGL_Page_Test 学习页面控件的使用
LVGL_Roller_Test 通过示例学习滑动列表选择器控件
LVGL_Slider_Test 创建一个单向和一个双向滑动条控件
LVGL_Spinbox_Test 学习微调控件的使用
LVGL_Spinner_Test 创建三个不同的环形加载器
LVGL_Switch_Test 创建两个不同的开关控件
LVGL_Table_Test 创建一个简单的表格
LVGL_Tabview_Test 实现三页的页面切换学习Tabview控件
LVGL_Textarea_Test 长按实现打字机效果的Textarea控件
LVGL_Tileview_Test 实现四面环形触摸切换的Tileview控件
LVGL_Window_Test 创建一个窗口，带设置子窗口学习窗口控件的使用
1、Arc控件简介
弧（lv_arc）
弧控件由背景弧和前景弧组成。 两者都可以具有起始角度和终止角度以及厚度。
可以作为传感器参数指示（无触控）或一些限值的调整（带触控）
2、Arc控件成员函数
创建Arc控件
lv_obj_t * lv_arc_create（lv_obj_t * par，constlv_obj_t * copy）
返回参数：指向创建好的弧控件的对象指针
参数：par：指向对象的指针，它将是新弧的父对象，比如在主屏幕上创建则写主屏幕的对象指针，在一个Page控件上创建一个Arc那就填Page对象指针
copy：这里的意思是从指定对象复制创建继承对象的参数设置，如果创建多个相同设置的控件可以直接以copy方式创建，就不会再设置参数了，如果没有直接写NULL
设置起始角度
注意：0度：在右边，就是正向13点方向，90度在正向6点方向，就是从1点钟方向顺时针
void lv_arc_set_start_angle（lv_obj_t * arc，uint16_t start）
参数：arc：指向弧对象的指针
start：开始角度
设置结束角度
注意：0度：在右边，就是正向13点方向，90度在正向6点方向，就是从1点钟方向顺时针
void lv_arc_set_end_angle（lv_obj_t * arc，uint16_t end）
参数：arc：指向弧对象的指针
end：开始角度
设置起始结束角度
void lv_arc_set_angles（lv_obj_t * arc，uint16_t start，uint16_t end）
参数：arc：指向弧对象的指针
start：开始角度
end：结束角度
设置弧形背景的起始角度
void lv_arc_set_bg_start_angle（lv_obj_t * arc，uint16_t start）
参数：arc：指向弧对象的指针
start：开始角度
设置弧形背景的结束角度
void lv_arc_set_bg_end_angle（lv_obj_t * arc，uint16_t end）
参数：arc：指向弧对象的指针
end：结束角度
设置弧形背景的开始和结束角度
void lv_arc_set_bg_angles（lv_obj_t * arc，uint16_t start，uint16_t end）
参数：arc：指向弧对象的指针
start：开始角度
end：结束角度
设置整个圆弧的旋转角度
void lv_arc_set_rotation（lv_obj_t * arc，uint16_t rotation_angle）
参数：arc：指向弧对象的指针
rotation_angle：旋转角度
设置圆弧的类型
void lv_arc_set_type（lv_obj_t * arc，lv_arc_type_ttype）
参数：arc：指向弧对象的指针
type：弧形类型
弧形类型包括：
LV_ARC_TYPE_NORMAL
LV_ARC_TYPE_SYMMETRIC
LV_ARC_TYPE_REVERSE
在圆弧上设置一个值
void lv_arc_set_value（lv_obj_t * arc，int16_t value）
参数：arc：指向弧对象的指针
value：值
设置圆弧的值范围
void lv_arc_set_range（lv_obj_t * arc，int16_t min，int16_t max）
参数：arc：指向弧对象的指针
min：最小值
max：最大值
设置圆弧旋转增量位置的阈值
void lv_arc_set_chg_rate（lv_obj_t * arc，uint16_t threshold）
参数：arc：指向弧对象的指针
threshold：增量阈值
设置圆弧是否可调
void lv_arc_set_adjustable（lv_obj_t * arc，bool adjustable）
参数：arc：指向弧对象的指针
adjustable：圆弧是否触控拖动改变角度
获取圆弧的起始角度
uint16_t lv_arc_get_angle_start（lv_obj_t * arc）
返回：起始角度[0..360]
参数：arc：指向弧对象的指针
获取圆弧的结束角度
uint16_t lv_arc_get_angle_end（lv_obj_t * arc）
返回：结束角度[0..360]
参数：arc：指向弧对象的指针
获取弧形背景的起始角度
uint16_t lv_arc_get_bg_angle_start（lv_obj_t * arc）
返回：起始角度[0..360]
参数：arc：指向弧对象的指针
获取弧形背景的结束角度
uint16_t lv_arc_get_bg_angle_end（lv_obj_t * arc）
返回：结束角度[0..360]
参数：arc：指向弧对象的指针
获取圆弧的类型
lv_arc_type_t lv_arc_get_type（constlv_obj_t * arc）
返回：弧形类型，具体看上面的“设置圆弧的类型”
参数：arc：指向弧对象的指针
获取圆弧的当前值
int16_t lv_arc_get_value（constlv_obj_t * arc）
返回：弧的当前值
参数：arc：指向弧对象的指针
获得圆弧的最小值
int16_t lv_arc_get_min_value（constlv_obj_t * arc）
返回：圆弧的最小值
参数：arc：指向弧对象的指针
获取圆弧的最大值
int16_t lv_arc_get_max_value（constlv_obj_t * arc）
返回：圆弧的最大值
参数：arc：指向弧对象的指针
获取圆弧是否正在拖动
bool lv_arc_is_dragged（constlv_obj_t * arc）
返回：true：正在拖动false：没拖动
参数：arc：指向弧对象的指针
获取圆弧是否触控拖动可调
bool lv_arc_get_adjustable（lv_obj_t * arc）
返回：圆弧是否可以拖动
参数：arc：指向弧对象的指针
3、代码编写
创建一个普通可拖动改变其值的Arc控件
//
创建一个触摸拖动改变其值的Arc弧形控件
//
lv_obj_t * scr = lv_disp_get_scr_act(NULL); // 返回屏幕的对象指针
lv_obj_t * arc1 = lv_arc_create(scr, NULL); // 在屏幕上创建一个Arc控件
//lv_arc_set_start_angle(arc1, 170); // 设置Arc1控件前景开始角度 Arc 3点钟方向为0点 顺时针起
//lv_arc_set_end_angle(arc1, 180); // 设置Arc1控件前景停止角度
lv_arc_set_angles(arc1,135,10); // 设置Arc1控件进度开始结束角度 同lv_arc_set_start_angle/lv_arc_set_end_angle
lv_obj_set_size(arc1, 150, 150); // 设置Arc1控件大小
lv_obj_align(arc1, NULL, LV_ALIGN_CENTER, -75, 0); // 对齐到屏幕中心，X偏移-75，靠左，Y偏移0
lv_arc_set_adjustable(arc1,true); // 设置控件可触摸调整结束角度
//lv_arc_set_bg_start_angle(arc1, 135); // 设置Arc1控件背景开始角度 Arc 3点钟方向为0点 顺时针起
//lv_arc_set_bg_end_angle(arc1, 45); // 设置Arc1控件背景停止角度
lv_arc_set_bg_angles(arc1,135,45); // 设置Arc1控件背景进度开始结束角度 lv_arc_set_bg_start_angle/lv_arc_set_bg_end_angle
lv_obj_t * arc1_label = lv_label_create(arc1, NULL); // 在Arc1控件上创建一个标签
lv_obj_align(arc1_label, arc1, LV_ALIGN_CENTER, 0, 0); // 标签对齐到Arc1控件中心
lv_label_set_text(arc1_label, "Arc1"); // 设置标签文本
lv_obj_set_event_cb(arc1, arc_event_handler); // 为Arc1控件创建一个事件回调触摸调整控件的值事件回调函数
// Arc事件回调函数
static void arc_event_handler(lv_obj_t * obj, lv_event_t event)
{
int angle = 0; // 改变的角度值
if(event == LV_EVENT_CLICKED) { // 控件上单击事件
ESP_LOGI(TAG, "arc_event_handler->Arc Clicked\n");
}else if(event == LV_EVENT_VALUE_CHANGED) { // 角度改变事件，手触摸/拖动进度条
angle = lv_arc_get_angle_end(obj); // 获取事件对象改变的角度
static char buf[8];
lv_snprintf(buf, sizeof(buf), "Arc %d", angle); // 将值变为字符串
lv_obj_t * label = lv_obj_get_child(obj, NULL); // 获取事件对象的标签子对象
lv_label_set_text(label, buf); // 设置标签文本
lv_obj_align(label, obj, LV_ALIGN_CENTER, 0, 0); // 标签文件有改变要重新设置对齐
ESP_LOGI(TAG, "arc_event_handler->Value_Changed:%d\n",angle);
}
}再创建一个通过动画动态改变值的Arc弧形控件
先创建一个动画，并初始化
// 创建一个动画
lv_anim_t anim;
lv_anim_init(&anim); // 初始化动画
lv_anim_set_time(&anim, 4000); // 设置动画时间4秒
lv_anim_set_playback_time(&anim, 1000); // 设置动画回放时间1秒
lv_anim_set_repeat_count(&anim, LV_ANIM_REPEAT_INFINITE); // 设置动画无限重复创建一风格，用来改变弧形控件的颜色等样式
// 给arc2创建一个风格改变它的颜色
static lv_style_t style_arc; // 定义一个风格
lv_style_init(&style_arc); // 初始化风格
lv_style_set_line_color(&style_arc, LV_STATE_DEFAULT, LV_COLOR_ORANGE); // 弧形背景色
lv_style_set_line_width(&style_arc, LV_STATE_DEFAULT, 20); // 弧形背景宽度
lv_style_set_line_rounded(&style_arc, LV_STATE_DEFAULT, 1); // 线头是否圆头结束
lv_style_set_line_opa(&style_arc, LV_STATE_DEFAULT, LV_OPA_30); // 弧形背景色透明度创建一个弧形控件，并在控件中心创建一个标签用来显示其值
// 创建弧形控件
lv_obj_t * arc2 = lv_arc_create(scr, NULL); // 在屏幕上创建一个Arc控件
lv_arc_set_angles(arc2,45,315); // 设置Arc1控件进度开始结束角度 同lv_arc_set_start_angle/lv_arc_set_end_angle
lv_obj_set_size(arc2, 150, 150); // 设置Arc1控件大小
lv_obj_align(arc2, NULL, LV_ALIGN_CENTER, 75, 0); // 对齐到屏幕中心，X偏移75，靠右，Y偏移0
lv_arc_set_adjustable(arc2,false); // 设置控件不可触摸调整结束角度
lv_arc_set_bg_angles(arc2,45,315); // 设置Arc1控件背景进度开始结束角度 lv_arc_set_bg_start_angle/lv_arc_set_bg_end_angle
lv_arc_set_rotation(arc2,90);
lv_obj_t * arc2_label = lv_label_create(arc2, NULL); // 在Arc1控件上创建一个标签
lv_obj_align(arc2_label, arc2, LV_ALIGN_CENTER, 0, 0); // 标签对齐到Arc1控件中心
lv_label_set_text(arc2_label, "Arc2"); // 设置标签文本给弧形控件添加刚刚创建的样式，并应用本地样式修改控件的弧形颜色
lv_obj_add_style(arc2, LV_BTN_PART_MAIN, &style_arc); // 为弧形控件添加上面创建的风格效果
lv_obj_set_style_local_line_color(arc2, LV_ARC_PART_INDIC,LV_STATE_DEFAULT , LV_COLOR_ORANGE);// 设置弧形控件前景色颜色
设置动画的动画对象，回调函数，设置动画值范围并开始动画
// 设置动画参数
lv_anim_set_var(&anim, arc2); // 设置动画对象为arc2
lv_anim_set_exec_cb(&anim, (lv_anim_exec_xcb_t)arc_anim); // 设置动画回调函数
lv_anim_set_values(&anim, 45, 315); // 设置动画值范围
lv_anim_start(&anim); // 开始动画编写动画回调函数
// 动画回调事件处理函数：回调控件对象，动画的值
static void arc_anim(lv_obj_t * arc, lv_anim_value_t value)
{
lv_arc_set_end_angle(arc, value); // 设置弧形控件的结束角度
static char buf[64];
lv_snprintf(buf, sizeof(buf), "%d", value); // 字符化数值
lv_obj_t * label = lv_obj_get_child(arc, NULL); // 获取弧形控件中的子对象，即label对象
lv_label_set_text(label, buf); // 设置label控件的文本显示
lv_obj_align(label, arc, LV_ALIGN_CENTER, 0, 0); // 重新对齐label控件到弧形控件中心，因为值长度有变化
}觉得文章写的不错，欢迎大家点赞，关注，一键三连，你们的支持是我写下去的动力
扫一扫
811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
