UGUI源码解析（十九）Image

Image

Image继承了MaskableGraphic, ISerializationCallbackReceiver, ILayoutElement, ICanvasRaycastFilter，提供了四种ImageType：Simple（普通）、Sliced（切割）、Tiled（平铺）、Filled（填充）。继承了ILayoutElement是一个布局元素，可以被各种布局组（ILayoutGroup）所包含，将它和其他布局元素进行布局。

OnPopulateMesh方法

重写Graphic的OnPopulateMesh方法，会在Graphic的Rebuild方法被调用，为CanvasRenderer的Mesh提供了顶点位置、顶点颜色、UV和三角形信息。根据图片设置的不同类型，生成不同的顶点、顶点颜色、UV和三角形信息。

Simple：

GenerateSimpleSprite方法

• 根据activeSprite的padding和RectTransform大小，重新计算顶点。
• 根据activeSprite的外侧UV信息GetOuterUV，设置UV。
• 把顶点，颜色，UV和三角形信息存入VertexHelper中。

Sliced：

GenerateSlicedSprite方法

• 生成36个uv点，九宫格里每一个格子对应4个uv点。
• 生成36个顶点，九宫格里每一个格子对应4个顶点。
• 中心区域被拉大，四角部分不变。当取消Image上的Fill Center的时候，中间区域变透明，这是因为中间区域顶点、UV等信息都没有。

 

Tiled：

GenerateTiledSprite方法

如果sprite有边界，那么便会生成跟GenerateSlicedSprite一样的结果，如果没有边界，那么就会在该区域内填充多个sprite，GenerateTiledSprite会计算该区域里可以放下多少个精灵单元（横纵分别向上取整），假设为格子数N，便会有4N个顶点，如果一个小格子可以完整的放下一个精灵单元，uv值便是x从0到1，y从0到1的完整纹理坐标。而如果只能放下一部分，那边根据百分比计算uv值。

 

Filled：

GenerateFilledSprite方法

区分了不同的填充方法（Horizontal,Vertical,Radial 90,Radial 180,Radial 360）

Horizontal和Vertical填充方法

根据m_FillOrigin（填充的起点）和m_FillAmount（填充的值），设置顶点和UV。

Radial系列方法

调用RadialCut方法，调整指定的四边形，使其径向填充。然后调用AddQuad方法，设置顶点，颜色和UV。

 

除了继承MaskableGraphic，还继承了ISerializationCallbackReceiver, ILayoutElement, ICanvasRaycastFilter。

ISerializationCallbackReceiver需要实现OnBeforeSerialize（序列化之前）和OnAfterDeserialize（序列化之后）两个方法。Image的OnBeforeSerialize是个空方法，OnAfterDeserialize里则是矫正了Fill Origin和Fill Amount为有效值。

ILayoutElement是布局元素，需要实现一些属性（Property），用于调节尺寸大小时用到。

ICanvasRaycastFilter，它在Graphic中被调用，用于筛选出被射线照射到的图像。需要实现接口IsRaycastLocationValid。

IsRaycastLocationValid方法

将屏幕上的点转换为Image的RectTransform上的局部空间中的位置local，转换为以左下角为参考点的坐标系，归一化local，然后转换为纹理空间坐标，通过调用Texture2D .GetPixelBilinear取得以标准化坐标，返回的已过滤像素颜色，判断像素颜色的alpha值是否大于等于eventMinimumAlphaThreshold，我们可以外部修改这个值，例如改成0.5f，那么点击到alpha小于0.5f的像素点就无法接收事件。