[UGUI]Image源码分析

unity版本5.3.5

一.属性

1.overrideSprite

脚本对精灵的访问均使用overrideSprite，如果m_OverrideSprite存在就使用m_OverrideSprite，否则使用m_Sprite，即优先级：m_OverrideSprite > m_Sprite

public Sprite overrideSprite { get { return m_OverrideSprite == null ? sprite : m_OverrideSprite; } set { if (SetPropertyUtility.SetClass(ref m_OverrideSprite, value)) SetAllDirty(); } }

2.preserveAspect

true表示保持原图的宽高比

二.方法

对于DataUtility类，可以看这个：https://www.cnblogs.com/lyh916/p/10611132.html

1.GenerateSimpleSprite

如果图片类型是Simple，那么就会进入这个方法。

GetDrawingDimensions：返回图片的绘制区域，例如下面的红框区域。值为(x,y,width,height)，即起点和宽高

然后将4个顶点加入到VertexHelper中，顶点顺序如下：

2.xxx

三.位置和UV分布

参考UGUI的源码，可以写一个简单版本的Image，继承Image类，只保留Simple类型图片的绘制

Image2.cs

 using UnityEngine;
 using UnityEngine.UI;
 using UnityEngine.Sprites;

 public class Image2 : Image {

     protected override void OnPopulateMesh(VertexHelper toFill)
     {
         if (overrideSprite == null)
         {
             base.OnPopulateMesh(toFill);
             return;
         }

         switch (type)
         {
             case Type.Simple:
                 GenerateSimpleSprite(toFill, preserveAspect);
                 break;
         }
     }

     void GenerateSimpleSprite(VertexHelper vh, bool lPreserveAspect)
     {
         Vector4 v = GetDrawingDimensions(lPreserveAspect);
         var uv = (overrideSprite != null) ? DataUtility.GetOuterUV(overrideSprite) : Vector4.zero;

         var color32 = color;
         vh.Clear();
         vh.AddVert(new Vector3(v.x, v.y), color32, new Vector2(uv.x, uv.y));
         vh.AddVert(new Vector3(v.x, v.w), color32, new Vector2(uv.x, uv.w));
         vh.AddVert(new Vector3(v.z, v.w), color32, new Vector2(uv.z, uv.w));
         vh.AddVert(new Vector3(v.z, v.y), color32, new Vector2(uv.z, uv.y));

         vh.AddTriangle(, , );
         vh.AddTriangle(, , );
     }

     private Vector4 GetDrawingDimensions(bool shouldPreserveAspect)
     {
         var padding = overrideSprite == null ? Vector4.zero : DataUtility.GetPadding(overrideSprite);
         var size = overrideSprite == null ? Vector2.zero : new Vector2(overrideSprite.rect.width, overrideSprite.rect.height);

         Rect r = GetPixelAdjustedRect();
         // Debug.Log(string.Format("r:{2}, size:{0}, padding:{1}", size, padding, r));

         int spriteW = Mathf.RoundToInt(size.x);
         int spriteH = Mathf.RoundToInt(size.y);

         var v = new Vector4(
                 padding.x / spriteW,
                 padding.y / spriteH,
                 (spriteW - padding.z) / spriteW,
                 (spriteH - padding.w) / spriteH);

         if (shouldPreserveAspect && size.sqrMagnitude > 0.0f)
         {
             var spriteRatio = size.x / size.y;
             var rectRatio = r.width / r.height;

             if (spriteRatio > rectRatio)
             {
                 var oldHeight = r.height;
                 r.height = r.width * (1.0f / spriteRatio);
                 r.y += (oldHeight - r.height) * rectTransform.pivot.y;
             }
             else
             {
                 var oldWidth = r.width;
                 r.width = r.height * spriteRatio;
                 r.x += (oldWidth - r.width) * rectTransform.pivot.x;
             }
         }

         v = new Vector4(
                 r.x + r.width * v.x,
                 r.y + r.height * v.y,
                 r.x + r.width * v.z,
                 r.y + r.height * v.w
                 );

         return v;
     }
 }

1.位置分布

当pivot为(0.5,0.5)时，位置分布如下。类推当pivot为(0,0)时，左下角为(0,0)，右上角为(w,h)

2.UV分布

与pivot无关，uv的中心点对应图片的中心点，左下角为(uv.x, uv.y)，右上角为(uv.z, uv.w)