UGUI源码分析-撸一个技能冷却组件(4)｜默然的博客

效果图如下所示：

原理

1. 先画一张灰色底图(简称：底图)，再上面再画一张不改变颜色的(简称：顶图)
2. 底图不做处理，顶图扇形填充参考上一篇：Image组件的分析。
3. 给组件添加点击事件响应，通过继承IPointerClickHandler,在OnPointerClick方法中通过判断fillAmount的值判断响应不同的事件。包含：在冷却状态的点击事件和激活状态的点击事件。

源码如下：

// SCold.cs
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
using NextFramework;

public class SCold : MaskableGraphic, IPointerClickHandler
{
    [SerializeField] Sprite m_Sprite;
    [SerializeField] Origin m_FillOrigin = Origin.Right;
    [Tooltip("是否是顺时针出现")]
    [SerializeField] bool m_FillClockwise = true;
    [Tooltip("冷却时间")]
    [SerializeField] float m_ColdTime = 3f;
    [Range(0, 1)]
    [SerializeField] float m_FillAmount;

    [SerializeField] ButtonClickEvent m_OnPositiveClick = new ButtonClickEvent();
    [SerializeField] ButtonClickEvent m_OnNegativeClick = new ButtonClickEvent();

    static readonly Vector3[] s_Xy = new Vector3[4];
    static readonly Vector3[] s_Uv = new Vector3[4];
    CoroutineTween.FloatTween m_Tween;

    public Sprite sprite
    {
        get { return m_Sprite; }
        set
        {
            if (m_Sprite == value) return;
            m_Sprite = value;
            SetMaterialDirty();
        }
    }
    public float fillAmount
    {
        get { return m_FillAmount; }
        set
        {
            if (m_FillAmount == value) return;
            m_FillAmount = value;
            SetVerticesDirty();
        }
    }

    public override Texture mainTexture
    {
        get
        {
            if (m_Sprite == null)
            {
                return material?.mainTexture ?? s_WhiteTexture;
            }
            return m_Sprite.texture;
        }
    }

    public override void SetNativeSize()
    {
        if (m_Sprite != null)
        {
            float w = m_Sprite.rect.width;
            float h = m_Sprite.rect.height;
            rectTransform.anchorMax = rectTransform.anchorMin;
            rectTransform.sizeDelta = new Vector2(w, h);
            SetAllDirty();
        }
    }
    protected override void OnPopulateMesh(VertexHelper vh)
    {
        if (m_Sprite == null) return;

        //获取左下角坐标(x,y),右上角坐标(z,w)
        Vector4 v = GetDrawingDimensions(true);
        //获取UV
        var uv = (m_Sprite != null) ? UnityEngine.Sprites.DataUtility.GetOuterUV(m_Sprite) : Vector4.zero;

        Color32 gery = new Color(color.r * 0.299f, color.g * 0.587f, color.b * 0.114f);

        vh.Clear();
        // 绘制底图 灰色(这里直接使用灰色效果不太好，可以配合Shader,然后修改像素的颜色)
        //公式： color.r*0.299 + color.g*0.587 + color.b*0.114
        AddQuad(vh, new Vector3(v.x, v.y), new Vector3(v.z, v.w), Color.grey, new Vector2(uv.x, uv.y), new Vector2(uv.z, uv.w));
        //绘制顶图
        if (m_FillAmount < 0.001f) return;

        float tx0 = uv.x;
        float ty0 = uv.y;
        float tx1 = uv.z;
        float ty1 = uv.w;

        s_Xy[0] = new Vector2(v.x, v.y);
        s_Xy[1] = new Vector2(v.x, v.w);
        s_Xy[2] = new Vector2(v.z, v.w);
        s_Xy[3] = new Vector2(v.z, v.y);

        s_Uv[0] = new Vector2(tx0, ty0);
        s_Uv[1] = new Vector2(tx0, ty1);
        s_Uv[2] = new Vector2(tx1, ty1);
        s_Uv[3] = new Vector2(tx1, ty0);

        float fx0, fx1, fy0, fy1;
        bool temp = false;
        for (int corner = 0; corner < 4; ++corner)
        {
            temp = corner < 2;
            fx0 = temp ? 0 : 0.5f;
            fx1 = temp ? 0.5f : 1f;

            temp = corner == 0 || corner == 3;
            fy0 = temp ? 0 : 0.5f;
            fy1 = temp ? 0.5f : 1f;

            s_Xy[0].x = Mathf.Lerp(v.x, v.z, fx0);
            s_Xy[1].x = s_Xy[0].x;
            s_Xy[2].x = Mathf.Lerp(v.x, v.z, fx1);
            s_Xy[3].x = s_Xy[2].x;

            s_Xy[0].y = Mathf.Lerp(v.y, v.w, fy0);
            s_Xy[1].y = Mathf.Lerp(v.y, v.w, fy1);
            s_Xy[2].y = s_Xy[1].y;
            s_Xy[3].y = s_Xy[0].y;

            s_Uv[0].x = Mathf.Lerp(tx0, tx1, fx0);
            s_Uv[1].x = s_Uv[0].x;
            s_Uv[2].x = Mathf.Lerp(tx0, tx1, fx1);
            s_Uv[3].x = s_Uv[2].x;

            s_Uv[0].y = Mathf.Lerp(ty0, ty1, fy0);
            s_Uv[1].y = Mathf.Lerp(ty0, ty1, fy1);
            s_Uv[2].y = s_Uv[1].y;
            s_Uv[3].y = s_Uv[0].y;

            float val = m_FillClockwise ?
                m_FillAmount * 4f - ((corner + (int)m_FillOrigin) % 4) :
                m_FillAmount * 4f - (3 - ((corner + (int)m_FillOrigin) % 4));

            if (RadialCut(s_Xy, s_Uv, Mathf.Clamp01(val), m_FillClockwise, ((corner + 2) % 4)))
                AddQuad(vh, s_Xy, color, s_Uv);
        }
    }




    /// Image's dimensions used for drawing. X = left, Y = bottom, Z = right, W = top.
    private Vector4 GetDrawingDimensions(bool shouldPreserveAspect)
    {
        var padding = m_Sprite == null ? Vector4.zero : UnityEngine.Sprites.DataUtility.GetPadding(m_Sprite);
        var size = m_Sprite == null ? Vector2.zero : new Vector2(m_Sprite.rect.width, m_Sprite.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)
        {
            PreserveSpriteAspectRatio(ref r, size);
        }

        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;
    }
    private void PreserveSpriteAspectRatio(ref Rect rect, Vector2 spriteSize)
    {
        var spriteRatio = spriteSize.x / spriteSize.y;
        var rectRatio = rect.width / rect.height;

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


    static void AddQuad(VertexHelper vertexHelper, Vector3[] quadPositions, Color32 color, Vector3[] quadUVs)
    {
        int startIndex = vertexHelper.currentVertCount;

        for (int i = 0; i < 4; ++i)
            vertexHelper.AddVert(quadPositions[i], color, quadUVs[i]);

        vertexHelper.AddTriangle(startIndex, startIndex + 1, startIndex + 2);
        vertexHelper.AddTriangle(startIndex + 2, startIndex + 3, startIndex);
    }
    static void AddQuad(VertexHelper vertexHelper, Vector2 posMin, Vector2 posMax, Color32 color, Vector2 uvMin, Vector2 uvMax)
    {
        var quadArray = new Vector3[4] {    new Vector3(posMin.x, posMin.y, 0),
                                            new Vector3(posMin.x, posMax.y, 0),
                                            new Vector3(posMax.x, posMax.y, 0),
                                            new Vector3(posMax.x, posMin.y, 0), };
        var uvArray = new Vector3[4] {  new Vector2(uvMin.x, uvMin.y),
                                        new Vector2(uvMin.x, uvMax.y),
                                        new Vector2(uvMax.x, uvMax.y),
                                        new Vector2(uvMax.x, uvMin.y)};
        AddQuad(vertexHelper, quadArray, color, uvArray);
    }

    /// <summary>
    /// Adjust the specified quad, making it be radially filled instead.
    /// </summary>

    static bool RadialCut(Vector3[] xy, Vector3[] uv, float fill, bool invert, int corner)
    {
        // Nothing to fill
        if (fill < 0.001f) return false;

        // Even corners invert the fill direction
        if ((corner & 1) == 1) invert = !invert;

        // Nothing to adjust
        if (!invert && fill > 0.999f) return true;

        // Convert 0-1 value into 0 to 90 degrees angle in radians
        float angle = Mathf.Clamp01(fill);
        if (invert) angle = 1f - angle;
        angle *= 90f * Mathf.Deg2Rad;

        // Calculate the effective X and Y factors
        float cos = Mathf.Cos(angle);
        float sin = Mathf.Sin(angle);

        RadialCut(xy, cos, sin, invert, corner);
        RadialCut(uv, cos, sin, invert, corner);
        return true;
    }

    /// <summary>
    /// Adjust the specified quad, making it be radially filled instead.
    /// </summary>

    static void RadialCut(Vector3[] xy, float cos, float sin, bool invert, int corner)
    {
        int i0 = corner;
        int i1 = ((corner + 1) % 4);
        int i2 = ((corner + 2) % 4);
        int i3 = ((corner + 3) % 4);

        if ((corner & 1) == 1)
        {
            if (sin > cos)
            {
                cos /= sin;
                sin = 1f;

                if (invert)
                {
                    xy[i1].x = Mathf.Lerp(xy[i0].x, xy[i2].x, cos);
                    xy[i2].x = xy[i1].x;
                }
            }
            else if (cos > sin)
            {
                sin /= cos;
                cos = 1f;

                if (!invert)
                {
                    xy[i2].y = Mathf.Lerp(xy[i0].y, xy[i2].y, sin);
                    xy[i3].y = xy[i2].y;
                }
            }
            else
            {
                cos = 1f;
                sin = 1f;
            }

            if (!invert) xy[i3].x = Mathf.Lerp(xy[i0].x, xy[i2].x, cos);
            else xy[i1].y = Mathf.Lerp(xy[i0].y, xy[i2].y, sin);
        }
        else
        {
            if (cos > sin)
            {
                sin /= cos;
                cos = 1f;

                if (!invert)
                {
                    xy[i1].y = Mathf.Lerp(xy[i0].y, xy[i2].y, sin);
                    xy[i2].y = xy[i1].y;
                }
            }
            else if (sin > cos)
            {
                cos /= sin;
                sin = 1f;

                if (invert)
                {
                    xy[i2].x = Mathf.Lerp(xy[i0].x, xy[i2].x, cos);
                    xy[i3].x = xy[i2].x;
                }
            }
            else
            {
                cos = 1f;
                sin = 1f;
            }

            if (invert) xy[i3].y = Mathf.Lerp(xy[i0].y, xy[i2].y, sin);
            else xy[i1].x = Mathf.Lerp(xy[i0].x, xy[i2].x, cos);
        }
    }


    #region IPointerClickHandler
    [System.Serializable]
    public class ButtonClickEvent : UnityEngine.Events.UnityEvent { }
    public void OnPointerClick(PointerEventData eventData)
    {
        if (eventData.button != PointerEventData.InputButton.Left) return;

        Press();
    }
    void Press()
    {
        if (!IsActive() || !raycastTarget) return;

        if (fillAmount >= 0.9999f)
        {
            Debug.Log("Positive state");
            fillAmount = 0;
            m_OnPositiveClick?.Invoke();
            // m_Tween = new CoroutineTween.FloatTween { duration = this.m_ColdTime, startValue = 0, targetValue = 1, ignoreTimeScale = true };
            // m_Tween.AddOnChangedCallback((value) =>
            // {
            //     fillAmount = value;
            // });
            // var runner = new CoroutineTween.TweenRunner<CoroutineTween.FloatTween>();
            // runner.Init(this);
            // runner.StartTween(m_Tween);
        }
        else
        {
            Debug.Log("Negative state");
            m_OnNegativeClick?.Invoke();
        }
    }
    #endregion

    #region Enum
    public enum Origin
    {
        Bottom,
        Right,
        Top,
        Left,
    }
    #endregion
}

// ScoldEditor.cs
using UnityEditor;
using UnityEditor.UI;
using UnityEngine;

namespace NextFramework.UI
{
    [CustomEditor(typeof(SCold), true)]
    public class SColdEditor : GraphicEditor
    {
        SerializedProperty m_Sprite;
        SerializedProperty m_FillOrigin;
        SerializedProperty m_FillClockwise;
        SerializedProperty m_ColdTime;
        SerializedProperty m_FillAmount;
        SerializedProperty m_OnPositiveClick;
        SerializedProperty m_OnNegativeClick;

        GUIContent m_Sprite_Txt;

        protected override void OnEnable()
        {
            base.OnEnable();

            m_Sprite = serializedObject.FindProperty("m_Sprite");
            m_FillOrigin = serializedObject.FindProperty("m_FillOrigin");
            m_FillClockwise = serializedObject.FindProperty("m_FillClockwise");
            m_ColdTime = serializedObject.FindProperty("m_ColdTime");
            m_FillAmount = serializedObject.FindProperty("m_FillAmount");
            m_OnPositiveClick = serializedObject.FindProperty("m_OnPositiveClick");
            m_OnNegativeClick = serializedObject.FindProperty("m_OnNegativeClick");

            m_Sprite_Txt = new GUIContent("Source Image");
        }
        public override void OnInspectorGUI()
        {
            serializedObject.Update();
            EditorGUILayout.PropertyField(m_Sprite, m_Sprite_Txt);
            EditorGUILayout.PropertyField(m_FillOrigin);
            EditorGUILayout.PropertyField(m_FillClockwise);
            EditorGUILayout.PropertyField(m_ColdTime);
            EditorGUILayout.PropertyField(m_FillAmount);
            EditorGUILayout.PropertyField(m_RaycastTarget);
            if (m_RaycastTarget.boolValue)
            {
                EditorGUILayout.PropertyField(m_OnPositiveClick);
                EditorGUILayout.PropertyField(m_OnNegativeClick);
            }
            if (GUILayout.Button("Set Native Size"))
            {
                SCold cold = (SCold)target;
                Undo.RecordObject(cold.transform, "set native size" + target.name);
                cold.SetNativeSize();
            }
            serializedObject.ApplyModifiedProperties();
        }
    }
}

相关阅读

• UGUI源码分析-Graphic(1)
• UGUI源码分析-RawImage(2)