使用UGUI自定义五边形

using UnityEngine;
using System.Collections.Generic;
using UnityEngine.UI;

/*
*
*           5
*
*
*   6       0       4
*
*
*      1    2    3
*
*
*
*/

public class UIPropWidget : Graphic
{
private const int VERTEX_SIZE = 8;                  // 必须为4的倍数  通过绘制两个四边形组成一个五边形

private List<Vector2> _currentList = new List<Vector2>();

private Vector2 vec0 = new Vector2(0, 0);
private Vector2 vec1;
private Vector2 vec2;
private Vector2 vec3;
private Vector2 vec4;
private Vector2 vec5;
private Vector2 vec6;

private float cos18;
private float sin18;

private float cos36;
private float sin36;

private float rate = 1f;
private float radius = 100f;

void Awake(){
Init();
}

void Update()
{
SetVerticesDirty();
}

public void Init(){

float angle36 = 36*Mathf.PI/180;
float angle18 = 18*Mathf.PI/180;

cos18 = Mathf.Cos(angle18);
sin18 = Mathf.Sin(angle18);

cos36 = Mathf.Cos(angle36);
sin36 = Mathf.Sin(angle36);

vec1 =  new Vector2(-radius*sin36*rate, -radius*cos36*rate);
vec3 =  new Vector2(radius*sin36*rate, -radius*cos36*rate);
vec4 =  new Vector3(radius*cos18*rate, radius*sin18*rate);
vec5 =  new Vector3(0, radius*rate);
vec6 =  new Vector3(-radius*cos18*rate, radius*sin18*rate);

//通过两点式算出1,3直线与y轴的交点
vec2 =  new Vector2(0, (0 - vec1.x)/(vec3.x - vec1.x)*(vec3.y - vec1.y) + vec1.y);

_currentList.Add(vec1);
_currentList.Add(vec2);
_currentList.Add(vec5);
_currentList.Add(vec6);
_currentList.Add(vec2);
_currentList.Add(vec3);
_currentList.Add(vec4);
_currentList.Add(vec5);

SetVerticesDirty();
}

private void UpdateVertex(List<UIVertex> vbo, List<Vector2> list)
{
// 必须要保证填充的是4的倍数
for (int i = 0; i < VERTEX_SIZE; ++i) {
var vert = UIVertex.simpleVert;
vert.color = color;
vert.position = list[i];
vbo.Add(vert);
}
}

protected override void OnFillVBO(List<UIVertex> vbo)
{
UpdateVertex(vbo, _currentList);
}
}

一个CanvasRenderer进行绘制，所有的控件和可显示的元素都是Graphic。Graphic持有一个canvasRenderer，通过SetVertices设置顶点，最终完成绘制。 举例来说，Image控件就是一个Graphic，这个GameObject上面同时还有一个CanvasRenderer，两者结合起来最终把图片绘制完成。

以五边形中心点为原点，求出五个顶点1， 4， 3， 6， 7以及底边中心点2的位置

因为uGUI的绘制元素是Quad而不是三角形，SetVertices中设置的顶点数目必须是4的倍数，所以用他们组成两个四边形 1,2,3,4和5,6,7,8用这两个四边形组成一个五边形

给的坐标是相对于自己的坐标系的像素坐标（相对于自已的privot）假设我要绘制一个100*100的矩形，privot是(0.5,0.5)，四个顶点的坐标则分别为(-50,-50),(50, -50),(50, 50),(-50, 50)

最后补充一些关于vertex设置的知识点。

一个控件的GameObject上面只允许有一个Graphic，所以不可能同时存在Image和Text。 我们自定义形状的控件可以通过两种方式来实现，一种是重载Graphic，这样这个控件就与Image等价，这里有两个比较重要的可以重载的函数 UpdateGeometry和OnFillVBO。如果看下uGUI的源代码可以发现，UpdateGeometry其实就是获取一个List，调用OnFillVBO设置顶点数据，再调用所有的BaseVertexEffect组件进行顶点修改，最后传递给canvasRenderer。 OnFillVBO就是我们常用的设置顶点的地方，只要在里面给vbo的参数Add数据就可以了，重复一下上文说过的，Add的数目必须是4的倍数。 Image和Text都是通过这里设置顶点数据的。

上面有提到BaseVertexEffect，这个就是另外一个可以修改顶点信息的地方，它是一个修饰的组件，以Text和Outline为例，Text是一个Graphic，在控件上面添加的Outline就是一个BaseVertexEffect，Graphic在运行的时候会获取控件上面所有的BaseVertexEffect，然后设置顶点的时候依次调用。 我们可以实现一个自定义效果，继承自BaseVertexEffect，然后重载ModifyVertex函数进行顶点设置。

原文链接