OnPopulateMesh函数

主要写一下OnPopulateMesh函数的使用方式

OnPopulateMesh函数

当一个UI元素生成顶点数据时会调用OnPopulateMesh(VertexHelper vh)函数，我们可以在这个函数中修改顶点的数据或者获取顶点的数据。

VertexHelper结构

UI元素的顶点数据会填充这个数据结构，我们可以修改这个数据结构里面的数据从而影响到顶点的一些属性。

在Unity文档中我们会看到如下的属性和方法，我们会一一介绍这写属性和方法的使用。

AddVert

添加一个顶点到VertexHelper缓存中

AddTriangle

添加一个三角形到VertexHelper缓存中

例子：

我们用AddVert和AddTriangle绘制一个三角形

我们创建一个脚本TestVertexHelper.cs并继承Graphic，因为OnPopulateMesh函数定义在Graphic中

[csharp] view plain copy

1. public class TestVertexHelper : Graphic  
2. {  
3.   
4.     protected override void OnPopulateMesh(VertexHelper vh)  
5.     {  
6.         vh.Clear();  
7.         vh.AddVert(new Vector3(0, 0), Color.red, Vector2.zero);  
8.         vh.AddVert(new Vector3(0, 100), Color.green, Vector2.zero);  
9.         vh.AddVert(new Vector3(100, 100), Color.black, Vector2.zero);  
10.   
11.         vh.AddTriangle(0, 1, 2);  
12.   
13.     }  
14. }  

首先我们用AddVert添加了三个顶点，三个顶点的关系如上图，然后用AddTriangle添加三角形，参数是三角形顶点的索引。GPU在绘制的时候会按照顶点0->顶点1->顶点2来绘制一个三角形

我们用AddVert和AddTriangle绘制一个正方形形

[csharp] view plain copy

1. public class TestVertexHelper : Graphic  
2. {  
3.     protected override void OnPopulateMesh(VertexHelper vh)  
4.     {  
5.         vh.Clear();  
6.         //添加四个顶点  
7.         vh.AddVert(new Vector3(0, 0), Color.red, Vector2.zero);  
8.         vh.AddVert(new Vector3(0, 100), Color.green, Vector2.zero);  
9.         vh.AddVert(new Vector3(100, 100), Color.black, Vector2.zero);  
10.         vh.AddVert(new Vector3(100, 0), Color.blue, Vector2.zero);  
11.         //添加两个三角形  
12.         vh.AddTriangle(0, 1, 2);  
13.         vh.AddTriangle(2, 3, 0);  
14.     }  
15. }  

我们首先用AddVert添加了四个顶点，顶点的顺序如图;然后用AddTriangle添加了两个三角形，其中vh.AddTriangle(0, 1, 2)表示用顶点0,1,2来绘制一个三角形，vh.AddTriangle(2, 3, 0)表示用顶点2,3,0来绘制一个三角形。

属性currentIndexCount 和currentVertCount

currentVertCount表示VertexHelper结构中有几个顶点

currentIndexCount表示VertexHelper结构中有几个顶点索引

我们来打印一下刚才绘制的正方形的信息

[csharp] view plain copy

1. public class TestVertexHelper : Graphic  
2. {  
3.     protected override void OnPopulateMesh(VertexHelper vh)  
4.     {  
5.         vh.Clear();  
6.         //添加四个顶点  
7.         vh.AddVert(new Vector3(0, 0), Color.red, Vector2.zero);  
8.         vh.AddVert(new Vector3(0, 100), Color.green, Vector2.zero);  
9.         vh.AddVert(new Vector3(100, 100), Color.black, Vector2.zero);  
10.         vh.AddVert(new Vector3(100, 0), Color.blue, Vector2.zero);  
11.         //添加两个三角形  
12.         vh.AddTriangle(0, 1, 2);  
13.         vh.AddTriangle(2, 3, 0);  
14.   
15.         Debug.Log("currentIndexCount " + vh.currentIndexCount);  
16.         Debug.Log("currentVertCount " + vh.currentVertCount);  
17.     }  
18. }  

我们看到顶点索引有四个，顶点有六个

顶点索引有四个（0,1,2,3）这个好理解，但是我们用AddVert添加了四个顶点，这里怎么显示有六个呢？因为unity会把三角形交界处的顶点分成两个。即三角形(0,1,2)和三角形(2,3,0)重合的顶点0,2会被分成两个顶点来处理。

PopulateUIVertex函数

返回指定索引的顶点数据，返回的顶点数据会填充UIVertex数据结构

例子：

我们使用PopulateUIVertex函数获取索引为2的顶点数据，然后打印出来

[csharp] view plain copy

1. public class TestVertexHelper : Graphic  
2. {  
3.     protected override void OnPopulateMesh(VertexHelper vh)  
4.     {  
5.         vh.Clear();  
6.         //添加四个顶点  
7.         vh.AddVert(new Vector3(0, 0), Color.red, Vector2.zero);  
8.         vh.AddVert(new Vector3(0, 100), Color.green, Vector2.zero);  
9.         vh.AddVert(new Vector3(100, 100), Color.black, Vector2.zero);  
10.         vh.AddVert(new Vector3(100, 0), Color.blue, Vector2.zero);  
11.         //添加两个三角形  
12.         vh.AddTriangle(0, 1, 2);  
13.         vh.AddTriangle(2, 3, 0);  
14.   
15.         UIVertex vertex = new UIVertex();  
16.         vh.PopulateUIVertex(ref vertex, 2);  
17.         Debug.Log("color " + vertex.color + " position " + vertex.position + " uv0 " + vertex.uv0);  
18.     }  
19. }  

我们看到这个数据，和我们设置的第三个顶点的数据是一样的

SetUIVertex函数

设置一个顶点的数据

我们上面把第三个顶点的颜色设置为了黑色(vh.AddVert(new Vector3(100, 100), Color.black, Vector2.zero);),我们通过SetUIVertex函数把第三个顶点(索引为2的顶点,索引从0开始)的三色设置为黄色

[csharp] view plain copy

1. public class TestVertexHelper : Graphic  
2. {  
3.     protected override void OnPopulateMesh(VertexHelper vh)  
4.     {  
5.         vh.Clear();  
6.         //添加四个顶点  
7.         vh.AddVert(new Vector3(0, 0), Color.red, Vector2.zero);  
8.         vh.AddVert(new Vector3(0, 100), Color.green, Vector2.zero);  
9.         vh.AddVert(new Vector3(100, 100), Color.black, Vector2.zero);  
10.         vh.AddVert(new Vector3(100, 0), Color.blue, Vector2.zero);  
11.         //添加两个三角形  
12.         vh.AddTriangle(0, 1, 2);  
13.         vh.AddTriangle(2, 3, 0);  
14.   
15.         //得到第三个顶点(顶点索引为2，从0开始)的颜色  
16.         UIVertex vertex = new UIVertex();  
17.         vh.PopulateUIVertex(ref vertex, 2);  
18.         //设置颜色为黄色  
19.         vertex.color = Color.yellow;  
20.         vh.SetUIVertex(vertex, 2);  
21.     }  
22. }  

我们看到索引为2的顶点变成了黄色

AddUIVertexQuad(UIVertex[] verts)函数

增加一个长方形

[csharp] view plain copy

1. public class TestVertexHelper : Graphic  
2. {  
3.     protected override void OnPopulateMesh(VertexHelper vh)  
4.     {  
5.         vh.Clear();  
6.         UIVertex[] verts = new UIVertex[4];  
7.         verts[0].position = new Vector3(0, 0);  
8.         verts[0].color = Color.red;  
9.         verts[0].uv0 = Vector2.zero;  
10.   
11.         verts[1].position = new Vector3(0, 100);  
12.         verts[1].color = Color.green;  
13.         verts[1].uv0 = Vector2.zero;  
14.   
15.         verts[2].position = new Vector3(100, 100);  
16.         verts[2].color = Color.black;  
17.         verts[2].uv0 = Vector2.zero;  
18.   
19.         verts[3].position = new Vector3(100, 0);  
20.         verts[3].color = Color.blue;  
21.         verts[3].uv0 = Vector2.zero;  
22.   
23.         vh.AddUIVertexQuad(verts);  
24.     }  
25. }  

我们看到这个方法和绘制两个三角形产生的效果是一样的

public void AddUIVertexStream(List<UIVertex> verts, List<int> indices);

这个方法向VertexHelper中批量增加顶点数据，第一个参数为顶点数据，第二个参数为构成图元的顶点索引目录

假如我们要绘制两个三角形,加入我们有两个三角形，顶点索引分别为(0,1,2),(2,3,0),那么我们的indices应该定义为

List<int> indices = new List<int>() { 0, 1, 2, 2, 3, 0 };

[csharp] view plain copy

1. public class TestVertexHelper : Graphic  
2. {  
3.     protected override void OnPopulateMesh(VertexHelper vh)  
4.     {  
5.         vh.Clear();  
6.         List<UIVertex> verts = new List<UIVertex>();  
7.   
8.         UIVertex vert0 = new UIVertex();  
9.         vert0.position = new Vector3(0, 0);  
10.         vert0.color = Color.red;  
11.         vert0.uv0 = Vector2.zero;  
12.         verts.Add(vert0);  
13.   
14.         UIVertex vert1 = new UIVertex();  
15.         vert1.position = new Vector3(0, 100);  
16.         vert1.color = Color.green;  
17.         vert1.uv0 = Vector2.zero;  
18.         verts.Add(vert1);  
19.   
20.         UIVertex vert2 = new UIVertex();  
21.         vert2.position = new Vector3(100, 100);  
22.         vert2.color = Color.black;  
23.         vert2.uv0 = Vector2.zero;  
24.         verts.Add(vert2);  
25.   
26.         UIVertex vert3 = new UIVertex();  
27.         vert3.position = new Vector3(100, 0);  
28.         vert3.color = Color.blue;  
29.         vert3.uv0 = Vector2.zero;  
30.         verts.Add(vert3);  
31.   
32.         List<int> indices = new List<int>() { 0, 1, 2, 2, 3, 0 };  
33.         vh.AddUIVertexStream(verts, indices);  
34.     }  
35. }  

效果：

 void AddUIVertexTriangleStream(List<UIVertex> verts)函数

这个方法向VertexHelper中批量增加三角形顶点数据,参数的长度必须是三的倍数

[csharp] view plain copy

1. public class TestVertexHelper : Graphic  
2. {  
3.     protected override void OnPopulateMesh(VertexHelper vh)  
4.     {  
5.         vh.Clear();  
6.         List<UIVertex> verts = new List<UIVertex>();  
7.   
8.         UIVertex vert0 = new UIVertex();  
9.         vert0.position = new Vector3(0, 0);  
10.         vert0.color = Color.red;  
11.         vert0.uv0 = Vector2.zero;  
12.         verts.Add(vert0);  
13.   
14.         UIVertex vert1 = new UIVertex();  
15.         vert1.position = new Vector3(0, 100);  
16.         vert1.color = Color.green;  
17.         vert1.uv0 = Vector2.zero;  
18.         verts.Add(vert1);  
19.   
20.         UIVertex vert2 = new UIVertex();  
21.         vert2.position = new Vector3(100, 100);  
22.         vert2.color = Color.black;  
23.         vert2.uv0 = Vector2.zero;  
24.         verts.Add(vert2);  
25.   
26.         vh.AddUIVertexTriangleStream(verts);  
27.     }  
28. }  

GetUIVertexStream(List<UIVertex> stream)函数

获取当前VertexHelper中的所有顶点的信息

[csharp] view plain copy

1. public class TestVertexHelper : Graphic  
2. {  
3.   
4.     protected override void OnPopulateMesh(VertexHelper vh)  
5.     {  
6.         vh.Clear();  
7.         //添加三个顶点  
8.         vh.AddVert(new Vector3(0, 0), Color.red, Vector2.zero);  
9.         vh.AddVert(new Vector3(0, 100), Color.green, Vector2.zero);  
10.         vh.AddVert(new Vector3(100, 100), Color.black, Vector2.zero);  
11.         //添加三角形  
12.         vh.AddTriangle(0, 1, 2);  
13.         //得到所有顶点的信息  
14.         List<UIVertex> stream = new List<UIVertex>();  
15.         vh.GetUIVertexStream(stream);  
16.         foreach (UIVertex v in stream) {  
17.             Debug.Log("color " + v.color + " position " + v.position + " uv0 " + v.uv0);  
18.         }  
19.     }  
20. }  

我们看到输出日志的值和我们输入的顶点信息一样