图片
# 一、概述
图片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)
# 四、操作视频