# 一、概述 弧有背景弧,指示弧,控制柄三个部分组成,都可以分别进行设置。一般用在加载器(就是等待界面转的圈圈)或者数值显示,数值调节这些场景。 # 二、控件设置 控件设置包含如下部分,控件标题,尺寸,外观,属性,事件,选中尺寸,会列出尺寸对应设置细节,以下会对各部分功能分别介绍。 ![100.png](https://cos.easydoc.net/57061433/files/l4dtap9u.png) ## 控件标题 控件名称为了方便理解和记忆可以修改,如:LvglArc1修改为:LvglArc1_mytest。 ![101.png](https://cos.easydoc.net/57061433/files/l4dtpbim.png) ## 尺寸 包括排列方式,X,Y轴坐标,拖动控件会改变对应X,Y轴坐标,也可以手动设置。屏幕左上角为像素坐标原点(x=0,y=0)。 【排列】:支持。。。。等排列方式,(注:暂时未实现) 【宽度】:LED宽度,可手动设置,也可以直接拖动修改 【高度】:LED高度,可手动设置,也可以直接拖动修改 【X轴】:描述控件在屏幕上的像素X坐标位置,可手动设置,也可以直接拖动修改 【Y轴】:描述控件在屏幕上的像素Y坐标位置,可手动设置,也可以直接拖动修改 ![002.png](https://cos.easydoc.net/57061433/files/l4xyuivw.png) ## 外观 外观部件包含:背景弧,指示弧,控制柄3部分。背景弧包含:背景样式和线属性,指示弧只包含线属性,控制柄只包含背景样式。 ![003.png](https://cos.easydoc.net/57061433/files/l4xz74ib.png) 背景样式,可以设置背景颜色,不透明度(0-255)设置为0是表示完全透明,渐变色,渐变开始,渐变结束,渐变方向,混合模式,如下图所示: ![004.png](https://cos.easydoc.net/57061433/files/l4xz8jle.png) 线属性,可以设置线条颜色,不透明度(0-255)设置为0是表示完全透明,线条宽度,端点圆角,如下图所示: ![005.png](https://cos.easydoc.net/57061433/files/l4xzbgpa.png) ## 属性 属性包含外观类型,数据,背景弧,控制柄显示4部分,如下图所示: ![006.png](https://cos.easydoc.net/57061433/files/l4xzlwgj.png) ## 事件 包含单击,按下,按住,取消按下,轻击,长按,持续长按,抬起,改变事件,每种事件包含函数和屏幕2个选项。 ![007.png](https://cos.easydoc.net/57061433/files/l4xzokxr.png) # 三、使用详解 ## 打开UI设计器 首先先创建一个UI工程,这个不做说明,参考前面的快速入门新建工程章节,然后点击UI设计器按钮进入UI设计界面。 ![image.png](https://cos.easydoc.net/57061433/files/l4yvxtwb.png) ## 添加弧 首先点击添加组件按钮,会出现一个下拉菜单,然后选择弧图标,点击确认。 ![image.png](https://cos.easydoc.net/57061433/files/l4yvzfb1.png) ![100.png](https://cos.easydoc.net/57061433/files/l4yw73gy.png) ## 控件名称修改 控件名称可以修改用户需要的,方便用户理解,同时会在UiDesign.lua脚本文件里自动生成对应的代码。 ![101.png](https://cos.easydoc.net/57061433/files/l4ywmv58.png) ## 尺寸设置 可以通过设置X,Y轴坐标设置控件位置,也可以手动拖拽标签放到合适的位置,坐标会自动变化,屏幕左上角为像素坐标原点(x=0,y=0)。宽度和高度课拖拽修改,也可手动设置。 ![102.png](https://cos.easydoc.net/57061433/files/l4yxgjlp.png) ## 外观设置 外观设置设置包含背景弧,指示弧,控制柄3部分。 ### 背景弧设置 背景弧可以设置背景样式和线属性。点击编辑进入对应设置界面,点击清除删除对应设置。 背景样式,可以设置背景颜色,不透明度,渐变色,渐变开始值,渐变结束值,渐变方向,混合模式。 ![103.png](https://cos.easydoc.net/57061433/files/l4z6v0j5.png) 线属性,可以设置线条颜色,不透明度,线条宽度,端点圆角。 ![104.png](https://cos.easydoc.net/57061433/files/l4z6yt02.png) ### 指示弧设置 背景弧只有线属性可以设置。点击编辑进入对应设置界面,点击清除删除对应设置。 线属性,可以设置线条颜色,不透明度,线条宽度,端点圆角。 ![105.png](https://cos.easydoc.net/57061433/files/l4z71xev.png) ### 控制柄设置 要显示控制柄,首先需要载属性面板下,打开控制柄显示选项。 背景弧只有背景样式可以设置。点击编辑进入对应设置界面,点击清除删除对应设置。 ![106.png](https://cos.easydoc.net/57061433/files/l4z78jsc.png) ## 属性设置 属性包含外观类型,数据,背景弧,控制柄显示4部分,如下图所示: ![107.png](https://cos.easydoc.net/57061433/files/l4z7bm4w.png) ## 运行效果 通过上面外观和属性设置后,实际运行效果如下所示: ![108.png](https://cos.easydoc.net/57061433/files/l4z7lnrm.png) ## 事件设置 包含单击,按下,按住,取消按下,轻击,长按,持续长按,抬起,改变,每种事件包含函数和屏幕2个选项。 ### 函数控制 单击事件选择函数,输入对应的函数名,在UiDesign.lua会自动生成,注册点击事件的消息回调函数,UiHandle.lua会自动生成对应空函数。用户自已添加需要实现功能,这里添加了一个打印弧度值的打印来演示效果。 ![109.png](https://cos.easydoc.net/57061433/files/l4zbz8ex.png) 运行模拟器后,点击选择框后效果: ![110.png](https://cos.easydoc.net/57061433/files/l4zcdhf9.png) ### 屏幕切换 首先添加一个新屏幕用来演示用,点击事件选择屏幕,选择新建的mytest屏幕,在UiDesign.lua会自动生成,注册点击事件的消息回调函数,运行模拟器后点击弧后,会切换到刚才创建的mytest屏幕。 ![012.png](https://cos.easydoc.net/57061433/files/l4zd0yt2) # 四、操作视频