UI Toolkit generateVisualContent的使用

方法描述:

Called when the VisualElement visual contents need to be (re)generated.

When this delegate is handled, you can generate custom geometry in the content region of the VisualElement. For an example, see the MeshGenerationContext documentation.

This delegate is called only when the VisualElement needs to regenerate its visual contents. It is not called every frame when the panel refreshes. The generated content is cached, and remains intact until any of the VisualElement's properties that affects visuals either changes, or VisualElement.MarkDirtyRepaint is called.

When you execute code in a handler to this delegate, do not make changes to any property of the VisualElement. A handler should treat the VisualElement as 'read-only'. Changing the VisualElement during this event might cause undesirable side effects. For example, the changes might lag, or be missed completely.

上面将Unity中 UI Toolkit中的VisualElement相关文档抄录在这儿，总结出来就是在我们需要自定义一些UI图形时可以重写这个委托方法，生成我们想要的几何图形。有几点需要注意：

这个方法不是每帧都调用，生成的内容会被缓存起来
如果想重绘，可以调用VisualElement.MarkDirtyRepaint这个方法，重绘将在下一帧进行
不要在重写的委托方法里去改变VisualElement的属性

那么，如何通过这个方法去生成我们想要的UI图形，这个委托本身是不会做这件事的，它是通过MeshGenerationContext 这个方法来帮我生成，这个类的对象可以通过generateVisualContent 回调用的传入参数中拿到。

在Unity的文档中关于这个类的使用有一个示例，抄录如下：

class TexturedElement : VisualElement{static readonly Vertex[] k_Vertices = new Vertex[4];static readonly ushort[] k_Indices = { 0, 1, 2, 2, 3, 0 };static TexturedElement(){k_Vertices[0].tint = Color.white;k_Vertices[1].tint = Color.white;k_Vertices[2].tint = Color.white;k_Vertices[3].tint = Color.white;}public TexturedElement(){generateVisualContent += OnGenerateVisualContent;m_Texture = AssetDatabase.LoadAssetAtPath<Texture2D>("Assets/tex.png");}Texture2D m_Texture;void OnGenerateVisualContent(MeshGenerationContext mgc){Rect r = contentRect;if (r.width < 0.01f || r.height < 0.01f)return; // Skip rendering when too small.float left = 0;float right = r.width;float top = 0;float bottom = r.height;k_Vertices[0].position = new Vector3(left, bottom, Vertex.nearZ);k_Vertices[1].position = new Vector3(left, top, Vertex.nearZ);k_Vertices[2].position = new Vector3(right, top, Vertex.nearZ);k_Vertices[3].position = new Vector3(right, bottom, Vertex.nearZ);MeshWriteData mwd = mgc.Allocate(k_Vertices.Length, k_Indices.Length, m_Texture);// Since the texture may be stored in an atlas, the UV coordinates need to be// adjusted. Simply rescale them in the provided uvRegion.Rect uvRegion = mwd.uvRegion;k_Vertices[0].uv = new Vector2(0, 0) * uvRegion.size + uvRegion.min;k_Vertices[1].uv = new Vector2(0, 1) * uvRegion.size + uvRegion.min;k_Vertices[2].uv = new Vector2(1, 1) * uvRegion.size + uvRegion.min;k_Vertices[3].uv = new Vector2(1, 0) * uvRegion.size + uvRegion.min;mwd.SetAllVertices(k_Vertices);mwd.SetAllIndices(k_Indices);}}

上面的示例展示了如何将一张纹理绘制到UI上。这个过程和OpenGL绘制Texture比较像，可以看到Allocate这个方法接收顶点数据和索引数据，最后一个纹理对象是一个可选参数，如果不传，则绘制出来的是Vertex.tint赋值的颜色。

这里要注意 Vertex 类的 position 属性，它是以左上角为坐标原点，向右是x轴的正方向，向下是y轴的正方向。给定的顶点和索引的顺序要匹配，按顺时针的方向进行三角形的绘制。

假如有一个长宽都为200的VisualElement，我们给定三个点(0, 0), (200, 0), (0, 200)绘制一个三角形，则它的索引顺序为0, 1, 2