unity探索者之UGUI圖片描邊

版權聲明：本文為原創文章，轉載請聲明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值也能達到比較好的效果