outline组件实现原理分析

如下是我们正常的描边字体

以及上面挂载的Outline组件

增大Outline的Effect Distance项的x,y值

底部的字体偏移加大而完全显示出来

UGUI的Outline源码
通过源码可知其大致实现原理是渲染出4个复制体，其中偏移参数分别是effect distance的xy值构成 (x,y) (x,-y) (-x,y) (-x,-y) 4组

using System.Collections.Generic;
 
namespace UnityEngine.UI
{
    [AddComponentMenu("UI/Effects/Outline", 15)]
    public class Outline : Shadow
    {
        protected Outline()
        {}
 
        public override void ModifyVertices(List<UIVertex> verts)
        {
            if (!IsActive())
                return;
 
            var start = 0;
            var end = verts.Count;
            ApplyShadow(verts, effectColor, start, verts.Count, effectDistance.x, effectDistance.y);
 
            start = end;
            end = verts.Count;
            ApplyShadow(verts, effectColor, start, verts.Count, effectDistance.x, -effectDistance.y);
 
            start = end;
            end = verts.Count;
            ApplyShadow(verts, effectColor, start, verts.Count, -effectDistance.x, effectDistance.y);
 
            start = end;
            end = verts.Count;
            ApplyShadow(verts, effectColor, start, verts.Count, -effectDistance.x, -effectDistance.y);
        }
    }
}