LVGL 控件之(Arc)弧图形绘制

一、 弧形组成

弧图形由背景弧和前景弧组成,它们有各自的起始角度和结束角度。

二、控件函数使用

  • 设置背景弧度的函数
lv_arc_set_bg_angles(arc, start_angle, end_angle)

或者用

lv_arc_set_bg_start_angle(arc, start_angle);
lv_arc_set_bg_end_angle(arc, end_angle);

背景弧:

  • 设置前景弧函数(指示器)
lv_arc_set_angles(arc, start_angle, end_angle)

或者用:

lv_arc_set_start_angle(arc, start_angle)
lv_arc_set_end_angle(arc, start_angle)

前景弧(指示器):

合并到一起后的效果:

  • 代码
lv_arc_set_bg_angles(arc, 0, 180);//背景角度设置
lv_arc_set_angles(arc, 0, 160);//前景(指示器)角度设置

三、角度控制

角度控制默认是顺时针方向,从最右边水平方向开始旋转,角度范围是 [0~360] 度。

四,如何用鼠标或触摸板控制指示器进度条

static void arc_event_handler(lv_obj_t* obj, lv_event_t event)
{
	int angle = 0;
	if (event == LV_EVENT_CLICKED) 
	{
		printf("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);	// 标签文件有改变要重新设置对齐
		printf("Value_Changed:%d\n", angle);
	}
}


void lv_ex_arc_1(void) 
{
	static lv_style_t angles_style;
	lv_style_init(&angles_style);
	lv_style_set_line_color(&angles_style, LV_STATE_DEFAULT, LV_COLOR_RED);
	
	// 创建一个Arc
	lv_obj_t* arc = lv_arc_create(lv_scr_act(), NULL);

	/*设置背景起始角度*/
	lv_arc_set_bg_start_angle(arc, 90);
	lv_arc_set_bg_end_angle(arc, 450);
	//lv_arc_set_bg_angles(arc, 90, 450);
	
	lv_arc_set_range(arc,0,450);

	/*设置弧的大小*/
	lv_obj_set_size(arc, 150, 150);
	lv_obj_align(arc, NULL, LV_ALIGN_CENTER, 0, 0);

	/*设置控件可触摸调整结束角度*/
	lv_arc_set_adjustable(arc, true);

	lv_obj_t* label = lv_label_create(arc, NULL);		// 在Arc控件上创建一个标签
	lv_obj_align(label, arc, LV_ALIGN_CENTER, 0, 0);
	lv_label_set_text(label, "Arc");

	lv_obj_add_style(arc, LV_ARC_PART_INDIC, &angles_style);

	/*注册事件回调*/
	lv_obj_set_event_cb(arc, arc_event_handler);

}
  • 模拟器输出结果

鼠标可以拖动指示器旋转。这个功能的实现,主要调用了 lv_arc_set_adjustable(arc, true) 函数,关于这个可调弧度的函数的使用需要注意:

它的起始位置必须是从6点钟方向开始(90度)。
如果想做一个闭合的圆形指示器,结束角度应该设置为450度。

  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【RT-Thread作品秀】基于 lvgl 的漏电保护装置校验仪 UI 界面设计作者:赵加文 概述低压漏电引起的各种安全事故已经严重影响到生产生活,威胁到生命财产安全。而解决这一现象的设备就是漏电保护开关,漏电保护开关的漏报率、误报率是很关键的参数,因此有必要对漏电保护开关的性能进行测试。因此,漏电保护装置校验仪是很有必要的。 开发环境硬件:ART-Pi 开发板,正点原子 480*272 4.3寸 RGB 屏幕 RT-Thread版本:4.0.3 开发工具及版本: RT-Thread Studio 2.0.0 :编写 编译 调试 下载代码 STM32CubeMX 6.1.0: codeBlocks 20.03:用于在 PC 机上进行 lvgl 模拟 MCU_Font V2.0: 用于转换中文,然后使得中文能够在 lvgl 中显示 RT-Thread使用情况概述在 UI 设计的整个过程中,使用到 RT-Thread 的部分主要有以下几个方面: 内核部分:动态线程,信号量 组件部分:PIN 设备、I2C 设备、TOUCH 设备框架、LCD 设备框架、finsh 组件 软件包部分:littlevgl2rtt、gt9147 硬件框架软件框架说明系统整体流程图: 软件模块说明整个UI 系统设计所遵循的是 lvgl 图形库的一个回调函数的机制,将各个事件与对应的操作所绑定起来,当滑动滑条时对应的滑条的回调函数就会被触发,那么就会执行滑条回调函数的内容,当滑动点击文本框时,文本框对应的回调函数就会被触发,进而创建键盘的控件,通过键盘输入所需要的数据。 演示效果图片展示: 演示视频: 比赛感悟这次参赛,之前还没有使用过 RT-Thread studio 这个集成开发环境,这次在使用 ART-Pi 的时候全程是使用 RT-Thread studio 这个开发环境,在使用的过程中也碰到了很多问题,有时候明明配置了相关组件,但是保存之后,并没有代码添加到工程里。现在也没有弄明白问题出在哪里,虽然存在着这里问题,但是在使用的过程中,还是非常的方便,整个开发过程就如同搭积木一样方便,与 RTT操作系统贴合的非常的紧密。 除此之外,便是在使用 lvgl 的过程中碰到了很多的问题,现在网上的教程基本是 lvgl v6 版本的教程,关于 lvgl v7 版本的教程很少,而且 v6版本与 V7 版本的 API 相差很大,不能按照 V6 版本来使用 V7 ,在这个过程中摸索了好多,同时也感受到了 lvgl 的魅力,使用在嵌入式系统上是非常不错的选择。
LVGL 是一个开源的 GUI 库,提供了多种现成的控件,如按钮、标签、列表等。如果你需要自定义控件,可以使用 LVGL 提供的绘图和事件处理接口实现。 下面是一个简单的示例,演示如何在 LVGL 中创建自定义控件: ```c // 自定义控件绘制函数 static void draw_custom_control(lv_obj_t * obj, const lv_area_t * clip_area) { // 绘制控件的背景和边框 lv_draw_rect(&obj->coords, clip_area, LV_COLOR_WHITE, LV_COLOR_BLACK, LV_DRAW_BORDER | LV_DRAW_FULL_COVER); // 绘制控件的内容 lv_draw_label(&obj->coords, clip_area, LV_COLOR_BLACK, "Custom Control", NULL, LV_LABEL_ALIGN_CENTER); } // 自定义控件的事件处理函数 static bool custom_control_event_handler(lv_obj_t * obj, lv_event_t event) { if (event == LV_EVENT_CLICKED) { // 处理控件被点击的事件 lv_obj_set_style_local_bg_color(obj, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_RED); } return false; } // 创建自定义控件 lv_obj_t * custom_control_create(lv_obj_t * parent) { lv_obj_t * obj = lv_obj_create(parent, NULL); // 设置控件的大小和位置 lv_obj_set_size(obj, 100, 50); lv_obj_set_pos(obj, 50, 50); // 设置控件绘制函数和事件处理函数 lv_obj_set_draw_func(obj, draw_custom_control); lv_obj_set_event_cb(obj, custom_control_event_handler); return obj; } ``` 在上面的示例中,我们创建了一个名为 `custom_control` 的自定义控件。`draw_custom_control` 函数用于绘制控件,`custom_control_event_handler` 函数用于处理控件的事件。在 `custom_control_create` 函数中,我们创建了一个 LVGL 对象,并设置了它的大小、位置、绘制函数和事件处理函数。最后,我们将对象返回给调用者。 使用上面的代码,你可以创建自己的 LVGL 控件并为其添加功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值