UGUI的文本通过继承BaseMeshEffect重写ModifyMesh函数来修改顶点数据,从而实现一些文本效果,比如Shadow(阴影),和 Outline(描边)。Text会按组件在Inspector中的顺序来调用ModifyMesh函数。早期版本的Shadow,Outline是通过继承BaseVertexEffect的ModifyVertices函数来修改顶点数据,原理都差不多。
每个字符有四个顶点,顺序是:左上,右上,右下,左下。实现圆形环绕效果只需修改顶点位置,使文字按圆形分布。下面上代码:
using UnityEngine;
using UnityEngine.UI;
public class CircleText : BaseMeshEffect
{
public int radius = 100;
public float spaceCoff = 1f;
public override void ModifyMesh(VertexHelper vh)
{
if(!IsActive() || radius == 0)
{
return;
}
UIVertex lb = new UIVertex();
UIVertex lt = new UIVertex();
UIVertex rt = new UIVertex();
UIVertex rb = new UIVertex();
for(int i = 0; i < vh.currentVertCount / 4; i++)
{
vh.PopulateUIVertex(ref lb, i * 4);
vh.PopulateUIVertex(ref lt, i * 4 + 1);
vh.PopulateUIVertex(ref rt, i * 4 + 2);
vh.PopulateUIVertex(ref rb, i * 4 + 3);
Vector3 center = Vector3.Lerp(lb.position, rt.position, 0.5f);
Matrix4x4 move = Matrix4x4.TRS(center * -1, Quaternion.identity, Vector3.one);
float rad = Mathf.PI / 2 - center.x * spaceCoff / radius;
Vector3 pos = new Vector3(Mathf.Cos(rad), Mathf.Sin(rad), 0) * radius;
Quaternion rotation = Quaternion.Euler(0, 0, rad * 180 / Mathf.PI - 90);
Matrix4x4 rotate = Matrix4x4.TRS(Vector3.zero, rotation, Vector3.one);
Matrix4x4 place = Matrix4x4.TRS(pos, Quaternion.identity, Vector3.one);
Matrix4x4 transform = place * rotate * move;
lb.position = transform.MultiplyPoint(lb.position);
lt.position = transform.MultiplyPoint(lt.position);
rt.position = transform.MultiplyPoint(rt.position);
rb.position = transform.MultiplyPoint(rb.position);
lb.position.y = lb.position.y - radius + center.y;
lt.position.y = lt.position.y - radius + center.y;
rt.position.y = rt.position.y - radius + center.y;
rb.position.y = rb.position.y - radius + center.y;
vh.SetUIVertex(lb, i * 4);
vh.SetUIVertex(lt, i * 4 + 1);
vh.SetUIVertex(rt, i * 4 + 2);
vh.SetUIVertex(rb, i * 4 + 3);
}
}
}
效果如图
可通过radius调整半径,设成负数的话圆会倒过来,按圆形排列后可能有点挤可以通过spaceCoff调整间距。Text的Alignment设置也还有效。
如果有使用Shadow,Outline,需把CircleText脚本放到前面,不然会产生奇怪的效果。