• LVGL_基础空间圆弧arc

    LVGL_基础空间圆弧arc

    1、创建控件

    在这里插入图片描述

    // 创建一个 arc 组件(对象)，他的父对象是活动屏幕对象
lv_obj_t * arc = lv_arc_create(lv_scr_act());

/* 调整位置 */
lv_obj_center(arc);								   // 方法1：让对象居中，简洁
//lv_obj_align(arc, LV_ALIGN_CENTER, 0, 0);		   // 方法2：让对象居中，较为灵活

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    2、设置大小
    /* 设置大小 */
// 对于 arc 来说，影响弧长的因素有两个：角度和半径
// 可以不设置，使用默认大小
//lv_obj_set_size(arc, 400, 400);

    • 1
    • 2
    • 3
    • 4
    3、设置默认值

    在这里插入图片描述

    /* 设置 arc 的当前值 */
/*
*  如果不设置，默认值是 INT16_MIN
*  也就是起码要在arc的数值被改变一次之后，再获取arc的当前值使用
*/
lv_arc_set_value(arc, 90);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    4、设置模式

    在这里插入图片描述
    在这里插入图片描述

    // 普通模式。指示器从最小值绘制到当前值。
// 如果不设置模式，默认就是此模式
//lv_arc_set_mode(arc, LV_ARC_MODE_NORMAL);

// 反向模式。指示器从最大值到当前值逆时针绘制。
//lv_arc_set_mode(arc, LV_ARC_MODE_REVERSE);

// 对称模式。指示器从中间点绘制到当前值。
//lv_arc_set_mode(arc, LV_ARC_MODE_SYMMETRICAL);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    5、设置动画变化率

    在这里插入图片描述

    /* 设置变化率 */
/*
*  当圆弧被按下时，当前值将根据设置的变化率以有限的速度绘制出来。
*  变化率的单位是 “度/秒”
*  默认是 720°/s
*/
lv_arc_set_change_rate(arc, 360);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    6、设置前景弧和背景弧

    在这里插入图片描述

    /* 设置背景弧和前景弧 */
/* 零度位于对象的中间右侧（3 点钟方向），并且度数沿顺时针方向增加。*/
/* 设置背景弧 */
/* 如果不设置，默认为         (135°-45°) */
/*
   * 背景弧就是我们看到的呈现灰色的弧，
* 其决定arc的绘制范围，同时也限制了前景弧的绘制范围
*/
// 设置背景弧的起始角度(位置)
lv_arc_set_bg_start_angle(arc, 0);

// 设置背景弧的结束角度(位置)
lv_arc_set_bg_end_angle(arc, 180);

// 同时设置背景弧的 起始+结束 角度
lv_arc_set_bg_angles(arc, 0, 180);


/* 设置前景弧 */
/* 如果不设置，默认为       (135°-270°) */
/*
*  前置弧就是我们看到的呈现蓝色的弧，
*  其直接与用户进行交互，绘制范围受限于背景弧
*/
// 设置前景弧的起始角度(位置)
lv_arc_set_start_angle(arc, 0);

// 设置前景弧的结束角度(位置)
lv_arc_set_end_angle(arc, 180);

// 同时设置前景弧的 起始+结束 角度
lv_arc_set_angles(arc, 0, 180);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    7、设置旋转角度

    在这里插入图片描述

    // 在设置好的前景弧和背景弧的基础上，
// 将其整个旋转一个指定的角度
lv_arc_set_rotation(arc, 90);

    • 1
    • 2
    • 3
    8、设置控件不能被点击
    // 让arc不可点击
// 这个时候指定通过 lv_arc_set_value 改变arc
// 可以用在加载页面作为 loader 提示
lv_obj_clear_flag(arc, LV_OBJ_FLAG_CLICKABLE);

// 让arc恢复可以点击的属性
//lv_obj_add_flag(arc, LV_OBJ_FLAG_CLICKABLE);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    9、去除部分组件

    在这里插入图片描述

    // 去除指示器部分的样式，相当于让指示器部分整个不存在
//lv_obj_remove_style(arc, NULL, LV_PART_INDICATOR);

// 去除旋钮部分的样式，相当于让选秀部分整个不存在
lv_obj_remove_style(arc, NULL, LV_PART_KNOB);

    • 1
    • 2
    • 3
    • 4
    • 5
    10、事件处理

    在这里插入图片描述

    /*
*  创建一个label实时更新展示arc的当前值
*  同时在事件处理回调函数中在
*  控制台打印arc的当前值
*/
lv_label_t * label = lv_label_create(lv_scr_act());
lv_obj_align_to(label, arc, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);

lv_obj_add_event_cb(arc, arc_event_cb, LV_EVENT_VALUE_CHANGED, label);

static void arc_event_cb(lv_event_t * e)
{
	lv_obj_t * arc = lv_event_get_target(e);
	lv_obj_t * label = (lv_obj_t *)lv_event_get_user_data(e);
	int16_t value = lv_arc_get_value(arc);

	lv_label_set_text_fmt(label, "%d°", value);
	LV_LOG_USER("lv_arc_get_value(arc) = %d", value);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    11、拓展历程

    在这里插入图片描述

    /* 第1层：以屏幕对象为容器(parent)，创建一个arc，其成为后面创建的组件的容器(parent) */
lv_obj_t * arc_tmp = lv_arc_create(lv_scr_act());
lv_obj_center(arc_tmp);
lv_obj_set_size(arc_tmp, 350, 350);
lv_arc_set_range(arc_tmp, 15, 35);
lv_arc_set_value(arc_tmp, 23);
lv_arc_set_bg_angles(arc_tmp, 120, 60);

lv_obj_set_style_radius(arc_tmp, 360, LV_PART_MAIN);							// 设置part main在默认状态下的圆角
lv_obj_set_style_bg_opa(arc_tmp, LV_OPA_COVER, LV_PART_MAIN);  					// 设置part main在默认状态下的背景透明度
lv_obj_set_style_bg_color(arc_tmp, lv_color_make(30, 35, 45), LV_PART_MAIN); 	// 设置part main在默认状态下的背景颜色
lv_obj_set_style_pad_all(arc_tmp, 10, LV_PART_MAIN);							// 设置part main在默认状态下的填充/间隔/pad
lv_obj_set_style_arc_color(arc_tmp, lv_color_make(15, 18, 21), LV_PART_MAIN); 	// 设置背景弧在默认状态下的颜色
lv_obj_set_style_arc_width(arc_tmp, 15, LV_PART_MAIN);							// 设置背景弧在默认状态下的宽度
lv_obj_set_style_arc_color(arc_tmp, lv_color_make(54, 185, 246), LV_PART_INDICATOR);	// 设置前景弧在默认状态下的颜色
lv_obj_set_style_arc_width(arc_tmp, 15, LV_PART_INDICATOR);						// 设置前景弧在默认状态下的宽度

// 去除旋钮部分的样式，相当于让选秀部分整个不存在
lv_obj_remove_style(arc_tmp, NULL, LV_PART_KNOB);		// 方法1，去除arc组件中整个PART_KNOB的样式
lv_obj_set_style_opa(arc_tmp, LV_OPA_0, LV_PART_KNOB);  // 方法2，让PART_KNOB完全透明

/* 第2层：以前面的组件为容器(parent)，创建一个面板，用来突出层次感，并成为后面创建的组件的容器(parent) */
lv_obj_t * panel3 = lv_obj_create(arc_tmp);
lv_obj_set_size(panel3, 280, 280);
lv_obj_center(panel3);

lv_obj_set_style_radius(panel3, 360, LV_PART_MAIN);								// 设置part main在默认状态下的圆角
lv_obj_set_style_bg_color(panel3, lv_color_make(100, 100, 100), LV_PART_MAIN);	// 设置part main在默认状态下的背景颜色
lv_obj_set_style_bg_grad_color(panel3, lv_color_make(60, 65, 75), LV_PART_MAIN);// 设置part main在默认状态下的背景渐变颜色
lv_obj_set_style_bg_grad_dir(panel3, LV_GRAD_DIR_VER, LV_PART_MAIN);			// 设置part main在默认状态下的背景渐变方向
lv_obj_set_style_border_color(panel3, lv_color_make(45, 50, 60), LV_PART_MAIN); // 设置part main在默认状态下的边框宽度
lv_obj_set_style_arc_width(panel3, 2, LV_PART_MAIN);
lv_obj_set_style_shadow_color(panel3, lv_color_make(5, 10, 15), LV_PART_MAIN);	// 设置part main在默认状态下的阴影颜色
lv_obj_set_style_shadow_width(panel3, 80, LV_PART_MAIN);						// 设置part main在默认状态下的阴影宽度
lv_obj_set_style_shadow_spread(panel3, 0, LV_PART_MAIN);						// 设置part main在默认状态下的阴影扩散范围
lv_obj_set_style_shadow_ofs_x(panel3, 0, LV_PART_MAIN);							// 设置part main在默认状态下的阴影在x轴上的偏移
lv_obj_set_style_shadow_ofs_y(panel3, 30, LV_PART_MAIN);						// 设置part main在默认状态下的阴影在y轴上的偏移

/* 第3层：以前面的组件为容器(parent)，再创建一个面板，用来突出层次感，同时成为展示当前数值组件的容器(parent) */
lv_obj_t * panel_temp_value = lv_obj_create(panel3);
lv_obj_set_size(panel_temp_value, 200, 200);
lv_obj_center(panel_temp_value);

lv_obj_set_style_radius(panel_temp_value, 360, LV_PART_MAIN);								// 设置part main在默认状态下的圆角
lv_obj_set_style_bg_color(panel_temp_value, lv_color_make(12, 25, 30), LV_PART_MAIN);		// 设置part main在默认状态下的背景颜色
lv_obj_set_style_bg_grad_color(panel_temp_value, lv_color_make(25, 28, 38), LV_PART_MAIN);	// 设置part main在默认状态下的背景渐变颜色
lv_obj_set_style_bg_grad_dir(panel_temp_value, LV_GRAD_DIR_VER, LV_PART_MAIN);				// 设置part main在默认状态下的背景渐变方向
lv_obj_set_style_border_color(panel_temp_value, lv_color_make(90, 100, 110), LV_PART_MAIN);	// 设置part main在默认状态下的边框宽度
//lv_obj_set_style_arc_width(panel3, 2, LV_PART_MAIN);

/* 第4层：以前面的组件为容器(parent)，创建一个label组件，用来展示 */
lv_obj_t * label_temp = lv_label_create(panel_temp_value);
lv_label_set_text_fmt(label_temp, "%d°", 23);
lv_obj_center(label_temp);

lv_obj_set_style_text_font(label_temp, &lv_100ask_font_source_han_mono_extra_light_32, LV_PART_MAIN); 	// 设置label_temp在默认状态下的字体
lv_obj_set_style_text_color(label_temp, lv_color_make(255, 255, 255), LV_PART_MAIN);					// 设置label_temp在默认状态下的字体颜色

/* 事件处理回调函数，在控制台和label_temp上实时展示当前数值 */
lv_obj_add_event_cb(arc_tmp, arc_event_cb, LV_EVENT_VALUE_CHANGED, label_temp);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
  • 相关阅读:
    spring总结，从底层源码角度概括，工作三四年都不一定明白
    如何让VSR又稳又快——高效视频超分中的残差稀疏连接学习
    SpringMVC（六、声明式事务控制）
    GB/T 28627-2023 抹灰石膏检测
    Anaconda常用操作（亲测有效果）
    springboot配置mybatis
    深度学习调参笔记
    王道数据结构课后代码题p150 15.设有一棵满二叉树(所有结点值均不同)，已知其先序序列为 pre，设计一个算法求其后序序列post。（c语言代码实现）
    零基础学Python--机器学习（四）：特征提取
    LabVIEW中编程更改进程的优先级
  • 原文地址：https://blog.csdn.net/weixin_50183638/article/details/133620344