关于UGUI的Image与RawImage组件的解析

UGUI系统中提供了2种显示图片的组件即Image与RawImage。本篇文章主要是介绍这2个组件含义与使用。

1.Image

（1）SourceImage:指定要显示的目标图片资源。需要注意的是，它只支持Sprite类型的图片，因此需要将目标图片资源的格式改成如下图所示的格式：

（2）Color：设置Color属性值，会改变图片显示的色调。类似给图片开了某种颜色的“灯”照射该图片。

（3）Material：设定用于渲染图片的材质。

（4）RaycastTarget：决定是否接收射线碰撞检测。换句话说，就是是否能够成为事件监听目标。

（5）Image Type：用于设定图片的显示类型，如Simple/Sliced/Tiled/Filled。不同的显示类型会导致Sprite“填充”Image组件的方式不同。

a.Simple

此模式下如果Image控件大小与Sprite的不相同时，Sprite将会被拉伸到与Image控件一般大。如下图所示：

值得注意的是，如果勾选上PreserveAspect选项时，Sprite将会根据Sprite原宽高比例进行拉伸。如下图所示：

 b.Sliced

俗称九宫格，需要做成九宫格的图片一般都是当做背景用的（如很多游戏中都有黑色的背景）。经过九宫格处理的Sprite，在缩放过程中，会保持4个角的切片不做缩放，4个边的切片只完成拉伸，只有中间的切片做缩放操作。

点击Sprite属性面板中的“Sprite Editor”按钮，进入Sprite编辑界面如下：

另外，关于Fill Center选项，如果取消勾选，Image不能完整显示，只会显示切片的边缘图片。

c.Tiled

俗称“地面砖平铺”，此种情况下，Sprite本身大小会保持不变，Sprite会像铺地面砖那样填充满整个Image控件。

另外，如果取消Fill Center选项，效果图如下：

d.Filled

俗称“呈现方式”，一般设置此模式的Image，都是用做有“CD”效果的技能按钮等，让Image以一定地展现方式一部分一部分地完全展示出来。

举例：设定Fill Method为Radial360，当改变FillAmount值，从0到1时，效果如下所示

（6） SetNative Size：按下此按钮后，会发现Image控件的大小会变成与Sprite图片本身大小一致。

2.RawImage

RawImage功能上与Image组件类似，但属性并不完全相同。

属性说明如下