Image组件是UGUI里最常用的组件（可能没有之一），我们知道其实还有一个RawImage组件。那么二者的区别是什么呢？二者（连同Text）都继承自MaskableGraphic。但是同为图片组件，Image的代码有接近一千行之多，而RawImage却只有120行。
RawImage顾名思义，未加工的生肉图片，RawImage只为我们提供了修改UV的方法，除此之外都是继承自MaskableGraphic的方法。是一个清纯不做作的组件。
而Image提供了四种ImageType：Simple（普通）、Sliced（切割）、Tiled（平铺）、Filled（填充），而且它还是布局元素（ILayoutElement），可以被各种布局组（ILayoutGroup）所包含，将它和其他布局元素进行布局。
所以假如我们要在UI上添加图片的时候，不妨考虑一下你到底需要的是轻量级的RawImage还是功能丰富的Image。
那么既然RawImage代码只有120行，那本文就先介绍RawImage。
最重要的一个方法：
protected override void OnPopulateMesh(VertexHelper vh)
{
Texture tex = mainTexture;
vh.Clear();
if (tex != null)
{
var r = GetPixelAdjustedRect();
var v = new Vector4(r.x, r.y, r.x + r.width, r.y + r.height);
{
var color32 = color;
vh.AddVert(new Vector3(v.x, v.y), color32, new Vector2(m_UVRect.xMin, m_UVRect.yMin));
vh.AddVert(new Vector3(v.x, v.w), color32, new Vector2(m_UVRect.xMin, m_UVRect.yMax));
vh.AddVert(new Vector3(v.z, v.w), color32, new Vector2(m_UVRect.xMax, m_UVRect.yMax));
vh.AddVert(new Vector3(v.z, v.y), color32, new Vector2(m_UVRect.xMax, m_UVRect.yMin));
vh.AddTriangle(0, 1, 2);
vh.AddTriangle(2, 3, 0);
}
}
}
OnPopulateMesh实在Graphic中被调用的（祥参UGUI内核大探究（七）Graphic），它为CanvasRenderer的Mesh提供了顶点、顶点颜色、UV和三角形信息（关于Mesh可以参考Unity3D Mesh小课堂）。关于UV，可以参考Unity3D Mesh小课堂（二）为三角形添加纹理，这里不做赘述，只是简单演示一下：
我们为一个圆形的生肉图片，设置UV矩形，x=0.5，w=0.5，这样我们就看到了一个被压扁的半圆：
如果把四个值x,y,w,h都改成0.5，我们就可以看到一个四分之一圆：
我们点击Set Native Size按钮，就可以看到，四分之一圆变小了（宽高各减少一半）。那么我们就引入下一个比较重要的方法：
public override void SetNativeSize()
{
Texture tex = mainTexture;
if (tex != null)
{
int w = Mathf.RoundToInt(tex.width * uvRect.width);
int h = Mathf.RoundToInt(tex.height * uvRect.height);
rectTransform.anchorMax = rectTransform.anchorMin;
rectTransform.sizeDelta = new Vector2(w, h);
}
}很好理解，不再赘述。
分析完轻量级的RawImage，我们便要分析近1000行代码的Image了。
还是先看OnPopulateMesh：
protected override void OnPopulateMesh(VertexHelper toFill)
{
if (overrideSprite == null)
{
base.OnPopulateMesh(toFill);
return;
}
switch (type)
{
case Type.Simple:
GenerateSimpleSprite(toFill, m_PreserveAspect);
break;
case Type.Sliced:
GenerateSlicedSprite(toFill);
break;
case Type.Tiled:
GenerateTiledSprite(toFill);
break;
case Type.Filled:
GenerateFilledSprite(toFill, m_PreserveAspect);
break;
}
} 这里根据图片设置的不同类型，要生成不同的顶点、顶点颜色、UV和三角形信息，所以分成了四个方法各自计算。
GenerateSimpleSprite方法是最简单的，与RawImage类似，只不过会根据精灵（sprite）的间隙（padding）和RectTransform的尺寸再计算一下顶点，并根据精灵的外侧UV信息（GetOuterUV）来设置UV。
GenerateSlicedSprite会生成36个uv点，如下图：
九宫格里每一个格子对应四个uv点。
uv点就36个，顶点也就有36个：
同样每个格子对应四个顶点（大致画一下格子）。
由此我们就可以看出实际上是中心区域被拉大了（四角部分不变，上下部分拉宽，左右部分拉长）。
我们取消Fill Center的时候会看到：
这是因为这种情况下中心格子的顶点、uv等信息都没有。
GenerateTiledSprite方法如果sprite有边界，那么便会生成跟GenerateSlicedSprite一样的结果（不知道为什么会有这样的设定，虽然貌似很合理，但是体验却不怎么好，而且我也搞不明白为什么要写两份相同功能的代码），如果没有边界，那么就会出现下面这种结果：
因为GenerateTiledSprite会计算该区域里可以放下多少个精灵单元（横纵分别向上取整），假设为格子数N，便会有4N个顶点，如果一个小格子可以完整的放下一个精灵单元，uv值便是x从0到1y从0到1的完整纹理坐标。而如果只能放下一部分，那边根据百分比计算uv值。
GenerateFilledSprite是最长的一个方法，因为它还区分了不同的填充方法（Horizontal,Vertical,Radial 90,Radial 180,Radial 360）。
但是分析起来却没那么复杂，Horizontal和Vertical很简单，只需要根据Fill Origin和Fill Amount设置矩形的顶点和UV值。而Radial系列方法不过是根据几何方法，来计算出顶点和UV值。（有兴趣的可以详细研究一下）
除了MaskableGraphic，Image还继承了ISerializationCallbackReceiver, ILayoutElement, ICanvasRaycastFilter三个接口。
ISerializationCallbackReceiver需要实现OnBeforeSerialize（序列化之前）和OnAfterDeserialize（发序列化之后）两个方法。我们知道UnityEditor会把我们设置的参数保存在Scene或者Prefab里面，这就是序列化，加载或运行的时候，需要从Scene或者Prefab读出来，这就是反序列化。
Image的OnBeforeSerialize是个空方法，OnAfterDeserialize里则是矫正了Fill Origin和Fill Amount为有效值。
ILayoutElement是布局元素，需要实现一些属性（Property），用于调节尺寸时做参考。具体细节，后续文章介绍Layout的时候再详细介绍。
最后还有一个ICanvasRaycastFilter，它是UnityEngine命名空间下的接口。它在Graphic中被调用，用于筛选出被射线照射到的图像。需要实现接口IsRaycastLocationValid。
Image的IsRaycastLocationValid接口将输入点转化为Image的内部点，然后在转换为Sprite纹理上的内部点，然后判断该点上的alpha值是否大于等于m_EventAlphaThreshold。这个值对应于可读写的属性eventAlphaThreshold。我们可以外部修改这个值，例如改成0.5f，那么点击到alpha小于0.5f的像素点就无法接收事件。