如下是我们正常的描边字体
以及上面挂载的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);
}
}
}