• 产品手册
  • 编辑器功能手册
  • UI编辑器
  • 图片

图片控件使用说明

1.图片的用途

图片控件的使用频率非常高,用于展示静态图片或图像文件,如JPEG、PNG等,都需要用到图片控件。

2.新建图片控件

在UI编辑器上方控件栏选择图片控件拖拽到画布中,就可以创建图片控件。

Img1

3.图片属性解析

图片控件创建后,右侧属性栏会显示图片相关的各项属性,可以根据项目需要进行设置。

图片样式有以下属性:

背景图片:可从资源管理器选择需要的图片资源

· 重置尺寸:会将控件重置为图片资源设计尺寸

· 清空资源:将背景图片设置为“空”

图片颜色:这是一个神奇的功能,可以改变图片的颜色,合理使用能节省资源。

Img2

九宫缩放:注意无需开启九宫的图不要勾选。九宫相关请见下文

4.九宫缩放

九宫格是什么

九宫格(9-slice scaling 或者 9-patch scaling)是一种图像处理技术,主要用来解决图片被拉伸变形、模糊的问题。这种技术通过将图片分割为九个部分,每个部分适应不同的缩放规则,以适应各种尺寸的UI元素,如按钮、面板和对话框。

九宫格界面和缩放规则

Img3

点击勾选框表示启用九宫缩放

点击编辑按钮Img4会进入九宫参数编辑窗口,下图。

拖拽上下左右4条线或者在右侧输入框输入数值可调整九宫切分的区域。编辑完成后关闭窗口并勾选九宫缩放即可应用九宫缩放相关参数。

Img5

九宫缩放规则:

· 保持4个角部分不变形

· 单向拉伸4条边(即在4个角两两之间的边,比如上边,只做横向拉伸)

· 双向拉伸中间部分(即九宫格的中间部分,横向,纵向同时拉伸,PS:拉伸比例不一定相同)