UnityGraphic功能，实现UGUI上三角形，四边形，圆环的绘制

这篇简单的纪录下利用Graphic类&＃xff0c;实现UGUI圆环的绘制。效果图如下&＃xff1a;

github目录&＃xff1a;https://github.com/luckyWjr/Demo

我们知道一个图形是由N个顶点&＃xff0c;互相连成线&＃xff0c;然后填充起来。如三角形有三个顶点&＃xff0c;四边形有四个&＃xff0c;而圆形可以理解为很多很多个顶点。Unity绘制图形的时候同样需要知道这些顶点信息&＃xff0c;而区别在于这些看起来无缝连接的形状&＃xff0c;在Untiy中是由一个个三角形拼接起来的。

也就是说&＃xff0c;Unity只能绘制出三角形&＃xff0c;然后由一个个三角形来组成更复杂的形状。例如四边形是两个三角形组成&＃xff08;下图中是ABC和ADC两个三角形&＃xff0c;当然也可以是ABD和BDC两个组成&＃xff09;&＃xff0c;五边形则是三个&＃xff0c;而圆则可以由N个三角形组成&＃xff0c;如下图&＃xff1a;

要绘制三角形那就需要三个顶点&＃xff0c;例如上图中的ABC&＃xff0c;Unity提供了UIVertex类来纪录顶点的信息&＃xff0c;例如坐标&＃xff0c;颜色&＃xff0c;uv&＃xff0c;顶点法线等。除了三个顶点信息外&＃xff0c;我们还需要知道其绘制顺序&＃xff0c;如是A->B->C还是A->C->B或者其他。这个顺序会影响到三角形面的朝向&＃xff08;Unity是左手坐标系&＃xff0c;绘制方向则是左手手指弯曲的方向&＃xff0c;面的朝向即左手大拇指朝向&＃xff0c;因此ABC的顺序面朝向屏幕前的我们&＃xff0c;ACB的顺序则是朝向屏幕后&＃xff09;由于UGUI默认的Shader&＃xff1a;UI/Default&＃xff0c;设置了Cuff Off&＃xff0c;也就是双面渲染&＃xff0c;所以我们看不出差别。

注&＃xff1a;Unity内置Shader下载路径&＃xff1a;https://unity3d.com/get-unity/download/archive

前面讲了大致的理念&＃xff0c;那么知道顶点信息后如何实现图形的绘制&＃xff0c;就是由Graphic类来帮助我们实现。如下图&＃xff0c;我们需要自定义一个类继承Graphic&＃xff0c;然后重新其OnPopulateMesh方法。&＃xff08;UIGI中的Image也是继承于此&＃xff09;

public class Triangle : Graphic
{protected override void OnPopulateMesh(VertexHelper vh){}
}

注&＃xff1a;文件名和类名必须相同&＃xff0c;否则在给GameObject挂该组件的时候&＃xff0c;会报错&＃xff1a;cant add script component because the script class cannot be found...

注&＃xff1a;若想要支持RectMask2D功能&＃xff0c;则改为继承MaskableGraphic即可

在OnPopulateMesh方法中提供了VertexHelper参数&＃xff0c;通过它我们就可以实现添加顶点等操作了。

添加顶点

VertexHelper.AddVert(Vector3 position, Color32 color, Vector2 uv0)

参数是顶点坐标&＃xff0c;颜色以及uv&＃xff0c;也可以直接添加我们前面提到的UIVertex&＃xff1a;

VertexHelper.AddVert(UIVertex v)

在VertexHelper中会有如下List来存放这些顶点的相关信息&＃xff0c;添加一个顶点对应的List.Count &＃43; 1

List m_Positions;
List m_Colors;
List m_Uv0S;
List m_Uv1S;
List m_Uv2S;
List m_Uv3S;
List m_Normals;
List m_Tangents;

添加三角面

VertexHelper.AddTriangle(int idx0, int idx1, int idx2)

参数是三个顶点存储在VertexHelper中的下标&＃xff0c;同时也代表了其绘制顺序&＃xff0c;idx0 -> idx1 -> idx2。

在VertexHelper中有如下List来存放这些下标&＃xff0c;添加一个三角面对应的List.Count &＃43; 3

private List m_Indices;

当前顶点数量

VertexHelper.currentVertCount

对应 m_Positions.Count&＃xff0c;添加了几个顶点数量就是几

当前索引数量

VertexHelper.currentIndexCount

对应 m_Indices.Count&＃xff0c;添加了几次三角面数量就是N * 3

因此正常的绘制一个四边形&＃xff0c;有四个顶点&＃xff0c;两个三角面&＃xff0c;因此currentVertCount &＃61; 4&＃xff0c;currentIndexCount &＃61; 6

清除所有顶点及索引信息

VertexHelper.Clear()

设置贴图

除了重写OnPopulateMesh方法外&＃xff0c;我们还可以重写mainTexture属性来设置贴图&＃xff0c;例如

[SerializeField] Sprite m_image;
public override Texture mainTexture &＃61;> m_image &＃61;&＃61; null ? s_WhiteTexture : m_image.texture;

s_WhiteTexture即是Texture2D.whiteTexture&＃xff0c;也就是纯白的图。

SetDirty

如果我们在运行时动态修改了一些属性&＃xff0c;需要重新绘制。例如修改了贴图&＃xff0c;或者绘制圆的时候&＃xff0c;修改了填充比例。我们可以调用下面方法来触发。

//调用后会在下一帧重新执行OnPopulateMesh
SetVerticesDirty();//调用后会在下一帧重新设置material以及Texture
SetMaterialDirty();//调用后会重新布局
SetLayoutDirty();//以上全部调用
SetAllDirty();

根据前面的介绍&＃xff0c;要绘制一个三角形就很简单了&＃xff0c;添加三个顶点&＃xff0c;添加一个三角面即可

[ExecuteInEditMode]
public class Triangle : Graphic
{public Vector2 positionA;public Vector2 positionB;public Vector2 positionC;protected override void OnPopulateMesh(VertexHelper vh){vh.Clear();vh.AddVert(positionA, Color.white, Vector2.zero);vh.AddVert(positionB, Color.red, Vector2.zero);vh.AddVert(positionC, Color.green, Vector2.zero);vh.AddTriangle(0, 1, 2);}
}

在Canvas中添加一个GameObject&＃xff0c;挂上我们的组件&＃xff0c;然后随便设置三个点的坐标即可&＃xff0c;效果如下

同样的四边形也就很简单了&＃xff0c;四个顶点&＃xff0c;两个三角面。不过在这边顺便讲一下前面没有提到的uv属性&＃xff0c;先来看完整的代码

[ExecuteInEditMode]
public class Quadrangle : Graphic
{public Vector2 positionLeftTop;public Vector2 positionRightTop;public Vector2 positionRightBottom;public Vector2 positionLeftBottom;[SerializeField] Sprite m_image;public override Texture mainTexture &＃61;> m_image &＃61;&＃61; null ? s_WhiteTexture : m_image.texture;UIVertex[] m_vertexes &＃61; new UIVertex[4];Vector2[] m_uvs &＃61; new Vector2[4];protected override void Start(){m_uvs[0] &＃61; new Vector2(0, 1);m_uvs[1] &＃61; new Vector2(1, 1);m_uvs[2] &＃61; new Vector2(1, 0);m_uvs[3] &＃61; new Vector2(0, 0);}protected override void OnPopulateMesh(VertexHelper vh){vh.Clear();for (int i &＃61; 0; i <4; i&＃43;&＃43;){m_vertexes[i].color &＃61; color;m_vertexes[i].uv0 &＃61; m_uvs[i];}m_vertexes[0].position &＃61; positionLeftTop;m_vertexes[1].position &＃61; positionRightTop;m_vertexes[2].position &＃61; positionRightBottom;m_vertexes[3].position &＃61; positionLeftBottom;vh.AddVert(m_vertexes[0]);vh.AddVert(m_vertexes[1]);vh.AddVert(m_vertexes[2]);vh.AddVert(m_vertexes[3]);vh.AddTriangle(0, 2, 1);vh.AddTriangle(0, 3, 2);}
}

相比之前&＃xff0c;我们添加了Sprite的设置&＃xff0c;同时也为顶点添加了uv属性&＃xff0c;效果图如下

正方形&＃xff08;就像Image组件了&＃xff09;&＃xff1a;   不规则形状&＃xff1a;

顶点的uv属性

uv简单来说就是一个二维坐标&＃xff08;u和v的取值范围都是 0-1 &＃xff09;&＃xff0c;代表着一张贴图每个像素的位置信息。uv(0,0)就代表图片的左下角&＃xff0c;uv(1,1)代表图片的右上角。这样上述代码m_uvs中的四个uv值就很好理解了&＃xff0c;分别是左上&＃xff0c;右上&＃xff0c;右下&＃xff0c;左下。

接着我们的正方形正好是四个顶点&＃xff0c;每个顶点设置相应的uv值&＃xff0c;那么在该顶点上就会显示图片中相应uv的像素信息了。两个顶点之间的颜色同样也对应着图片中两点之间的像素信息。&＃xff08;顶点的color值要设置为Graphic中的color属性&＃xff09;

圆的话就是由N个三角形组成&＃xff0c;圆环则是把这些组成圆的三角形切了一刀&＃xff0c;也就是变成了一个四边形。由于代码写了注释&＃xff0c;这里就不详细介绍了&＃xff0c;效果图见文章最上方。

[ExecuteInEditMode]
// Changed to maskableGraphic so it can be masked with RectMask2D
public class Annulus : MaskableGraphic
{public enum ShapeType{Annulus,//圆环Circle,//圆}[SerializeField] Sprite m_image;public ShapeType shapeType;public float innerRadius &＃61; 10;//圆环内径&＃xff0c;为0即是圆public float outerRadius &＃61; 20;//圆环外径[Range(0, 1)] [SerializeField] float m_fillAmount;//填充值[Range(0, 720)] public int segments &＃61; 360;//片数&＃xff0c;越大锯齿越不明显[SerializeField] Image.Origin360 m_originType;//填充的起点public bool m_isClockwise &＃61; true;//填充方向&＃xff0c;是否是顺时针填充public override Texture mainTexture &＃61;> m_image &＃61;&＃61; null ? s_WhiteTexture : m_image.texture;float m_originRadian &＃61; -1;//根据m_originType设置相关弧度&＃xff08;-1表示还没设置过对应的值&＃xff09;public float fillAmount{get &＃61;> m_fillAmount;set{m_fillAmount &＃61; value;SetVerticesDirty();}}public Sprite image{get &＃61;> m_image;set{if (m_image &＃61;&＃61; value)return;m_image &＃61; value;SetVerticesDirty();SetMaterialDirty();}}public Image.Origin360 originType{get &＃61;> m_originType;set{if (m_originType &＃61;&＃61; value)return;m_originType &＃61; value;SetOriginRadian();SetVerticesDirty();}}public bool isClockwise{get &＃61;> m_isClockwise;set{if (m_isClockwise !&＃61; value){m_isClockwise &＃61; value;SetVerticesDirty();}}}UIVertex[] m_vertexes &＃61; new UIVertex[4];Vector2[] m_uvs &＃61; new Vector2[4];Vector2[] m_positions &＃61; new Vector2[4];protected override void Start(){if (m_originRadian &＃61;&＃61; -1)SetOriginRadian();m_uvs[0] &＃61; new Vector2(0, 1);m_uvs[1] &＃61; new Vector2(1, 1);m_uvs[2] &＃61; new Vector2(1, 0);m_uvs[3] &＃61; new Vector2(0, 0);}protected override void OnPopulateMesh(VertexHelper vh){vh.Clear();//m_fillAmount &＃61;&＃61; 0&＃xff0c;什么也不绘制if (m_fillAmount &＃61;&＃61; 0) return;#if UNITY_EDITORSetOriginRadian();
#endif//每个面片的角度float degrees &＃61; 360f / segments;//需要绘制的面片数量int count &＃61; (int)(segments * m_fillAmount);float cos &＃61; Mathf.Cos(m_originRadian);float sin &＃61; Mathf.Sin(m_originRadian);//计算外环起点&＃xff0c;例如m_originRadian &＃61; 0&＃xff0c;x &＃61; -outerRadius&＃xff0c;y &＃61; 0&＃xff0c;所以起点是Left&＃xff08;九点钟方向&＃xff09;float x &＃61; -outerRadius * cos;float y &＃61; outerRadius * sin;Vector2 originOuter &＃61; new Vector2(x, y);//计算内环起点x &＃61; -innerRadius * cos;y &＃61; innerRadius * sin;Vector2 originInner &＃61; new Vector2(x, y);for (int i &＃61; 1; i <&＃61; count; i&＃43;&＃43;){//m_positions[0] 当前面片的外环起点m_positions[0] &＃61; originOuter;//当前面片的弧度 &＃43; 起始弧度 &＃61; 终止弧度float endRadian &＃61; i * degrees * Mathf.Deg2Rad * (isClockwise ? 1 : -1) &＃43; m_originRadian;cos &＃61; Mathf.Cos(endRadian);sin &＃61; Mathf.Sin(endRadian);//m_positions[1] 当前面片的外环终点m_positions[1] &＃61; new Vector2(-outerRadius * cos, outerRadius * sin);//m_positions[2] 当前面片的内环终点//m_positions[3] 当前面片的内环起点if (shapeType &＃61;&＃61; ShapeType.Annulus){m_positions[2] &＃61; new Vector2(-innerRadius * cos, innerRadius * sin);m_positions[3] &＃61; originInner;}else{m_positions[2] &＃61; Vector2.zero;m_positions[3] &＃61; Vector2.zero;}// 设置顶点的颜色坐标以及uvfor (int j &＃61; 0; j <4; j&＃43;&＃43;){m_vertexes[j].color &＃61; color;m_vertexes[j].position &＃61; m_positions[j];m_vertexes[j].uv0 &＃61; m_uvs[j];}//当前顶点数量int vertCount &＃61; vh.currentVertCount;//如果是圆只需要添加三个顶点&＃xff0c;创建一个三角面vh.AddVert(m_vertexes[0]);vh.AddVert(m_vertexes[1]);vh.AddVert(m_vertexes[2]);//参数即三角面的顶点绘制顺序vh.AddTriangle(vertCount, vertCount &＃43; 2, vertCount &＃43; 1);// 如果是圆环就需要添加第四个顶点&＃xff0c;并再创建一个三角面if (shapeType &＃61;&＃61; ShapeType.Annulus){vh.AddVert(m_vertexes[3]);vh.AddTriangle(vertCount, vertCount &＃43; 3, vertCount &＃43; 2);}//当前面片的终点就是下个面片的起点originOuter &＃61; m_positions[1];originInner &＃61; m_positions[2];}}//m_originType改变的时候需要重新设置m_originRadianvoid SetOriginRadian(){switch (m_originType){case Image.Origin360.Left:m_originRadian &＃61; 0 * Mathf.Deg2Rad;break;case Image.Origin360.Top:m_originRadian &＃61; 90 * Mathf.Deg2Rad;break;case Image.Origin360.Right:m_originRadian &＃61; 180 * Mathf.Deg2Rad;break;case Image.Origin360.Bottom:m_originRadian &＃61; 270 * Mathf.Deg2Rad;break;}}
}

知道原理&＃xff0c;我们就可以进行一些魔改&＃xff0c;例如fillmount小于1的时候&＃xff0c;用别的颜色来填充等&＃xff0c;大家可以自由发挥。