UGUI研究院之RawImage显示多边形或圆形贴图（二十六）

本文固定链接: http://www.xuanyusong.com/archives/4375
雨松MOMO 2017年04月28日 于 雨松MOMO程序研究院 发表

项目中可能有些icon.有的地方显示矩形，有的地方又要显示圆形。

网上我看有人用shader实现了，我觉得使用起来不太方便。后来参考了一个工程 https://bitbucket.org/ddreaper/unity-ui-extensions


把sprite或者texture拽上去。在这里设置多边形的数量，我测试36就已经很圆了。。

然后就是代码

using System;
using UnityEngine;
using UnityEngine.UI;

public class UICircle : RawImage
{
    const int FILL_PERCENT = 100;
    float thickness = 5;

    [SerializeField][Range(4,360)]
    int _segments = 36;

    public int segments {
        get { return _segments;}
        set { 
            if (_segments != value) {
                _segments = value; 
                SetVerticesDirty ();
                #if UNITY_EDITOR
                UnityEditor.EditorUtility.SetDirty (transform);
                #endif
            }
        }
    }


    protected override void OnRectTransformDimensionsChange ()
    {
        base.OnRectTransformDimensionsChange ();
        this.thickness = (float)Mathf.Clamp (this.thickness, 0, rectTransform.rect.width / 2);
    }

    protected override void OnPopulateMesh(VertexHelper vh)
    {
        float outer = -rectTransform.pivot.x * rectTransform.rect.width;
        float inner = -rectTransform.pivot.x * rectTransform.rect.width + this.thickness;

        vh.Clear();

        Vector2 prevX = Vector2.zero;
        Vector2 prevY = Vector2.zero;
        Vector2 uv0 = new Vector2(0, 0);
        Vector2 uv1 = new Vector2(0, 1);
        Vector2 uv2 = new Vector2(1, 1);
        Vector2 uv3 = new Vector2(1, 0);
        Vector2 pos0;
        Vector2 pos1;
        Vector2 pos2;
        Vector2 pos3;

        float tw = rectTransform.rect.width;
        float th = rectTransform.rect.height;

        float angleByStep = (FILL_PERCENT / 100f * (Mathf.PI * 2f)) / segments;
        float currentAngle = 0f;
        for (int i = 0; i < segments + 1; i++)
        {

            float c = Mathf.Cos(currentAngle);
            float s = Mathf.Sin(currentAngle);

            StepThroughPointsAndFill(outer, inner, ref prevX, ref prevY, out pos0, out pos1, out pos2, out pos3, c, s);

            uv0 = new Vector2(pos0.x / tw + 0.5f, pos0.y / th + 0.5f);
            uv1 = new Vector2(pos1.x / tw + 0.5f, pos1.y / th + 0.5f);
            uv2 = new Vector2(pos2.x / tw + 0.5f, pos2.y / th + 0.5f);
            uv3 = new Vector2(pos3.x / tw + 0.5f, pos3.y / th + 0.5f);

            vh.AddUIVertexQuad(SetVbo(new[] { pos0, pos1, pos2, pos3 }, new[] { uv0, uv1, uv2, uv3 }));

            currentAngle += angleByStep;
        }
    }

    private void StepThroughPointsAndFill(float outer, float inner, ref Vector2 prevX, ref Vector2 prevY, out Vector2 pos0, out Vector2 pos1, out Vector2 pos2, out Vector2 pos3, float c, float s)
    {
        pos0 = prevX;
        pos1 = new Vector2(outer * c, outer * s);

        pos2 = Vector2.zero;
        pos3 = Vector2.zero;

        prevX = pos1;
        prevY = pos2;
    }

    protected UIVertex[] SetVbo(Vector2[] vertices, Vector2[] uvs)
    {
        UIVertex[] vbo = new UIVertex[4];
        for (int i = 0; i < vertices.Length; i++)
        {
            var vert = UIVertex.simpleVert;
            vert.color = color;
            vert.position = vertices[i];
            vert.uv0 = uvs[i];
            vbo[i] = vert;
        }
        return vbo;
    }

}

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;
using UnityEditor.UI;

[CustomEditor(typeof(UICircle), true)]
[CanEditMultipleObjects]
public class UICircleInspector : RawImageEditor {

    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI ();
        UICircle circle = target as UICircle;
        circle.segments = Mathf.Clamp(EditorGUILayout.IntField ("UICircle多边形", circle.segments),4,360);

    }

}

OK，因为继承的是RawImage所以缺点就是没办法合并批次了。（因为我们项目icon比较多，不想把图集撑得很大，而带来内存的问题，所以暂时没考虑合并批次的问题）

转by 蒋志杰