UGUI中的文字描边

在UGUI中，有一个专门处理描边的组件:outline。它的实现原理是在原uivertex中加入4个偏移的uivertex来实现显示效果，当我们把Effect Distance调大之后很容易发现。

 

 在实际项目中，此组件的显示效果往往不能满足策划的要求，我们可以改进此组件的显示效果。

outline效果：

 

 

改进方法是：增加更多的uivertex偏移。

public class CircleOutline : ModifiedShadow
{
    [SerializeField]
    int m_circleCount = 20;

#if UNITY_EDITOR
    protected override void OnValidate()
    {
        base.OnValidate();
        circleCount = m_circleCount;
    }
#endif

    public int circleCount
    {
        get
        {
            return m_circleCount;
        }

        set
        {
            m_circleCount = Mathf.Max(value, 4);
            if (graphic != null)
                graphic.SetVerticesDirty();
        }
    }

    public override void ModifyVertices(List<UIVertex> verts)
    {
        if (!IsActive())
            return;

        var total = m_circleCount;
        var neededCapacity = verts.Count * total;
        if (verts.Capacity < neededCapacity)
            verts.Capacity = neededCapacity;
        var original = verts.Count;
        var count = 0;
        var next = 0;
        var dx = effectDistance.x;
        var dy = effectDistance.y;
        var radStep = 2 * Mathf.PI / total;
        var curRad = Mathf.PI * 0.25f;
        for (int i = 0; i < total; i++)
        {
            next += original;
            ApplyShadow(verts, effectColor, count, next, dx * Mathf.Cos(curRad), dy * Mathf.Sin(curRad));
            curRad += radStep;
            count = next;
        }
    }
}

实现效果 ：，描边锯齿感减少了。

 

注意：实际的顶点数量将是原text的circleCount+1倍，对于text内容较多时，将导致顶点数急剧扩张，可能达到canvas的顶点数量限制65535，所以circleCount数量应越少越好。