用户界面图片

1.创建Image图片
(1).菜单栏->GameObject->UI->Image创建一个Image元素。

(2).创建出来的UI元素会自动添加到画布下, 如果没有创建画布, 会自动创建。

(3).Inspector视图中, Image元素的组件和属性

2.Rect Transform组件
(1).Rect Transform:所有UI元素都是以矩形来表现的。
(2).Rect Transform:是继承自Transform的一个组件, 是所有UI元素都具有也必须具有的组件。
(3).PosX、PosY、PosZ位置
(4).Width:UI元素的宽度
(5).Height:UI元素的高度
(6).Anchors:锚点,相对于父亲节点来说的
(7).Pivot:UI元素的中心点。0对应于图片自身左下角, 1对应于图片自身右上角
(8).Rotation:元素围绕中心点Pivot点沿X、Y、Z轴的旋转角度
(9).Scale:元素在X、Y、Z维度中的缩放比例
(10).要缩放元素, 一般改变元素的width和height, 而不用scale。
3.Image组件
(1).Source Image:指定显示的图片
(2).Color:设置图片的叠加颜色, 默认设置为白色, 显示与原图一致。
(3).Material:材质, 可以指定自定义的材质, 默认留空即可。
(4).Image Type:显示的类型, 有Simple(简单)、Sliced(切片)、Tiled(砖块)、Filled(填充)4种类型。
(5).Preserve Aspect:简单、填充类型特有参数, 图形保持长、宽比。
(6).Fill Center:切片类型特有参数, 是否显示切片精灵的中心部分。
(7).Fill Method:填充类型特有参数, 填充方法有Horizontal(水平)、Vertical(垂直)、Radial(弧形)、Radial 180(180度弧形)以及Radial 360(360度弧形)5种类型。
(8).Fill Origin:填充类型特有参数, 填充的基准点。
(9).Fill Amount:填充类型特有参数, 填充量, 值域为[0,1]。
(10).Fill Clockwise:弧形填充类型特有参数, 填充方向是否是顺时针方向。
(11).Set Native Size:点击该按钮使显示与原图尺寸相等。
4.Simple Image Type:简单类型, 将精灵缩放至符合Image的宽和高, 也是默认的类型。
5.Sliced Image Type:当精灵为九宫格时, 适用于类型为Sliced的Image类型。如果图片被放大, 它的左上、左下、右上、右下4个边角将保持原尺寸, 其余部分将被拉伸。
6.Tiled Image Type:平铺类型, 精灵保持原尺寸并在Image区域内重复绘制以填满该区域。

7.Filled填充类型, 图片按照Simple的方式显示, 但通过设置”Fill Amount”参数从0到1, 可以将原图逐渐显示。
(1).将Fill Method设置为Horizontal水平填充

(2).将Fill Method设置为Vertical竖直填充

(3).将Fill Method设置为Radial 360弧度填充