图片

# 一、概述 图片IMG是用于显示图像的基本对象类型,图像来源可以是文件,或者定义的符号。 # 二、控件设置 控件设置包含如下部分,控件标题,尺寸,外观,属性,事件,选中尺寸,会列出尺寸对应设置细节,以下会对各部分功能分别介绍。 ![设置1.png](https://cos.easydoc.net/36623104/files/l244spat.png) ## 控件标题 控件名称为了方便理解和记忆可以修改,如:LvglImg1修改为:LvglImg1_mytest。 ![设置2.png](https://cos.easydoc.net/36623104/files/l245ctt4.png) ## 尺寸 包括排列方式,X,Y轴坐标,拖动控件会改变对应X,Y轴坐标,也可以手动设置。宽度和高度同坐标一样可以手动拖到修改,也可以通过设置来修改。 ![设置3.png](https://cos.easydoc.net/36623104/files/l245fipg.png) ## 外观 可以设置背景样式 ![设置4.png](https://cos.easydoc.net/36623104/files/l245h7ap.png) 背景样式设置,可以设置背景颜色和透明度,渐变色,渐变方向,混合模式。 ![设置5.png](https://cos.easydoc.net/36623104/files/l245t4o5.png) ## 属性 用来设置图片路径,格式文件路径+文件名称,如:/qrcode.png。 ![设置6.png](https://cos.easydoc.net/36623104/files/l245w03k.png) ## 事件 这里只有单击事件,可以选择函数和屏幕。 ![设置7.png](https://cos.easydoc.net/36623104/files/l24623nb.png) # 三、使用详解 ## 打开UI设计器 首先先创建一个UI工程,这里不做说明,然后点击UI设计器按钮进入UI设计界面。 ![image.png](https://cos.easydoc.net/36623104/files/l2465lde.png) ## 添加图片 首先点击添加组件按钮,会出现一个下拉菜单,然后选择图片图标,点击确认。 ![image.png](https://cos.easydoc.net/36623104/files/l24673wg.png) ![使用1.png](https://cos.easydoc.net/36623104/files/l246a8q5.png) ## 图片名称修改 图片名称可以修改自己需要的,方便自已理解,同时会自动生成对应的代码。 ![使用2.png](https://cos.easydoc.net/36623104/files/l24bp9zx.png) ## 尺寸设置 可以通过设置X,Y轴坐标设置图片位置,也可以手动拖拽图片放到合适的位置,坐标会自动变化,图标的宽度和高度可以通过拖拽方式实现,可以通过设置具体数据的方式实现。 ![使用3.png](https://cos.easydoc.net/36623104/files/l24c525o.png) ## 外观设置 外观设置,为背景样式设置,点击编辑进入对应设置界面,点击清除删除对应设置。 ![使用4.png](https://cos.easydoc.net/36623104/files/l24cjogl.png) 背景样式设置界面,可以设置背景颜色,不透明度,渐变色,渐变开始值,渐变结束值,渐变方向,混合模式。 ![使用5.png](https://cos.easydoc.net/36623104/files/l24crbr6.png) 上图设置后对应的效果显示如下所示: ![使用6.png](https://cos.easydoc.net/36623104/files/l24d18ir.png) ## 属性设置 属性设置用来设置图片路径,路径+图片名称。 ![使用7.png](https://cos.easydoc.net/36623104/files/l24dfo9h.png) ## 事件设置 只包含单击事件,事件控制对象可以选函数或屏幕。 ![使用8.png](https://cos.easydoc.net/36623104/files/l24drkhy.png) ### 函数控制 单击事件选择函数,输入对应的函数名,在UiDesign.lua会自动生成,注册点击事件的消息回调函数,UiHandle.lua会自动生成对应空函数。用户自已添加需要实现功能,这个添加了一个打印用来演示效果。 ![使用9.png](https://cos.easydoc.net/36623104/files/l24e4bkx.png) ### 屏幕切换 首先添加一个新屏幕用来演示用,单击事件选择屏幕,选择新建的mytest屏幕,在UiDesign.lua会自动生成,注册点击事件的消息回调函数,运行模拟器点击后,会切换到刚才创建的mytest屏幕。 ![使用10.png](https://cos.easydoc.net/36623104/files/l24egvzz.png) # 四、操作视频