[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(0, 1, 2);
        vh.AddTriangle(2, 3, 0);
    }

    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)