版權宣告：本文為原創文章，轉載請宣告https://www.cnblogs.com/unityExplorer/p/13524270.html

自從UGUI出現之後，我就已經放棄使用NGUI了，原因不多說，畢竟是親爹產的

不過即使如此，UGUI也存在不少問題，很多元件也不完善

今天要說的就是Outline這個元件，相信不少朋友都使用過，也相信不少朋友都和我一樣，對於這個元件十分噁心

比如，我們給下面這張圖新增一個描邊

誒，效果還不錯哦，我們再換一張

恩，我覺得應該沒有美工能接受這樣的描邊，就算你叫他美術都不好使

這個問題要解決，怎麼辦好呢？我們先來分析分析UGUI中Outline的原始碼

    public
 
 class Outline : Shadow
    {
        protected Outline()
        {}

        public override void ModifyMesh(VertexHelper vh)
        {
            if (!IsActive())
                return;

            var verts = ListPool<UIVertex>.Get();
            vh.GetUIVertexStream(verts);

            
 
var neededCpacity = verts.Count * 5;
            if (verts.Capacity < neededCpacity)
                verts.Capacity = neededCpacity;

            var start = 0;
            var end = verts.Count;
            ApplyShadowZeroAlloc(verts, effectColor, start, verts.Count, effectDistance.x, effectDistance.y);

            start 
 
= end;
            end = verts.Count;
            ApplyShadowZeroAlloc(verts, effectColor, start, verts.Count, effectDistance.x, -effectDistance.y);

            start = end;
            end = verts.Count;
            ApplyShadowZeroAlloc(verts, effectColor, start, verts.Count, -effectDistance.x, effectDistance.y);

            start = end;
            end = verts.Count;
            ApplyShadowZeroAlloc(verts, effectColor, start, verts.Count, -effectDistance.x, -effectDistance.y);

            vh.Clear();
            vh.AddUIVertexTriangleStream(verts);
            ListPool<UIVertex>.Release(verts);
        }
    }

程式碼很簡單，也很好理解，通俗點說，就是把圖片複製4份，然後疊在圖片下方，每一張複製的圖片都進行偏移，偏移量就是我們設定的描邊的尺寸

既然原理是這樣的，那問題簡單了，我們增加複製的數量，將缺口補上就好了

    public class Outline : Shadow
    {
        public float bevelAngleCoefficient = 0.7071f; //1除以根號2

        public override void ModifyMesh(VertexHelper vh)
        {
            if (!IsActive())
                return;
            if (effectDistance.x == 0 && effectDistance.y == 0)
                return;

            var verts = ListPool<UIVertex>.Get();
            vh.GetUIVertexStream(verts);

            var neededCpacity = verts.Count * 9;
            if (verts.Capacity < neededCpacity)
                verts.Capacity = neededCpacity;

            float bevelAngleX = effectDistance.x * bevelAngleCoefficient;
            float bevelAngleY = effectDistance.y * bevelAngleCoefficient;

            var start = 0;
            var end = verts.Count;
            ApplyShadowZeroAlloc(verts, effectColor, start, verts.Count, effectDistance.x, effectDistance.y);

            start = end;
            end = verts.Count;
            ApplyShadowZeroAlloc(verts, effectColor, start, verts.Count, bevelAngleX, 0);

            start = end;
            end = verts.Count;
            ApplyShadowZeroAlloc(verts, effectColor, start, verts.Count, effectDistance.x, -effectDistance.y);

            start = end;
            end = verts.Count;
            ApplyShadowZeroAlloc(verts, effectColor, start, verts.Count, 0, bevelAngleY);

            start = end;
            end = verts.Count;
            ApplyShadowZeroAlloc(verts, effectColor, start, verts.Count, -effectDistance.x, effectDistance.y);

            start = end;
            end = verts.Count;
            ApplyShadowZeroAlloc(verts, effectColor, start, verts.Count, -bevelAngleX, 0);

            start = end;
            end = verts.Count;
            ApplyShadowZeroAlloc(verts, effectColor, start, verts.Count, -effectDistance.x, -effectDistance.y);

            start = end;
            end = verts.Count;
            ApplyShadowZeroAlloc(verts, effectColor, start, verts.Count, 0, -bevelAngleY);

            vh.Clear();
            vh.AddUIVertexTriangleStream(verts);
            ListPool<UIVertex>.Release(verts);
        }
    }

bevelAngleCoefficient是斜角係數，這個值的設定是為了滿足不同型別的圖片，邊緣較圓滑的圖片，使用預設值就可以，對於上面的叉，值設定為2最為合適，效果如下

對於邊緣圓滑的圖片，修改bevelAngleCoefficient值也能達到比較好的效果