java环绕圆的文字_UGUI 实现圆形环绕文字

UGUI 的 Text 渲染的过程是由 TextGenerator 产生顶点数据，配合字体产生的贴图最终显示在屏幕上。如果我们能修改 Text 的顶点位置，就能按照需求将文字摆放到圆周上。

从 Text 类的继承树(Text -|> MaskableGraphic -|> Graphic)我们可以追溯到 Graphic 基类。

在 Graphic 类中有一个 void UpdateGeometry() 方法，它会调用由子类覆盖的 void OnFillVBO(List vbo) 方法产生顶点，然后从组件中获取实现 IVertexModifier 接口的脚本，按从上到下的顺序执行 ModifyVertices() 操作，以便在顶点数据更新到显存之前修改它。

protected virtual void UpdateGeometry()

{

var vbo = s_VboPool.Get();

if (rectTransform != null && rectTransform.rect.width >= 0 && rectTransform.rect.height >= 0)

OnFillVBO(vbo);

var components = ComponentListPool.Get();

GetComponents(typeof(IVertexModifier), components);

for (var i = 0; i < components.Count; i++)        (componentsas IVertexModifier).ModifyVertices(vbo);

ComponentListPool.Release(components);

canvasRenderer.SetVertices(vbo);

s_VboPool.Release(vbo);

}

在 UGUI 中，使用到 IVertexModifier 这个接口的类有 BaseVertexEffect，以及它的子类：Shadow(阴影)，和 Outline(描边)。恍然大悟！原来这两个特效便是通过修改顶点实现的：阴影的本质就是复制原有的文字顶点到 VBO(vertex buffer object)尾部，再修改原顶点的颜色并作一点偏移，阴影就出来了。

0x01 Demo可见我们只要继承 BaseVertexEffect 类，实现修改文字顶点的坐标即可把文字移动到圆周上。以下是成品的效果，比较简陋地实现了将文字变换成圆周上部居中，可调整半径和字距：

圆心位于中轴点。文本框设置成 Overflow ，不然原有的框外的字就不显示了。此外由于 IVertexModifier 接口的组件是被顺序调用的，所以这个脚本要放在其它文字效果的上面(如投影、描边)：

顶点变换是通过三角函数计算每个文字移动后在圆周的位置，然后使用矩阵变换将每个字符的四个顶点变换到相应的位置上。每个字符顶点的顺序是：左上，右上，右下，左下。

以上的思路还可以扩展到将文字沿路径或其它图形。该方法只有在文字有变化的时候才会调用，所以性能很高。