Unity 2019 UGUI圆形环绕文字实现

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脚本放到前面，不然会产生奇怪的效果。