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

最新推荐文章于 2025-06-19 20:46:12 发布

王王王渣渣

最新推荐文章于 2025-06-19 20:46:12 发布

阅读量5.6k

点赞数 12

CC 4.0 BY-SA版权

分类专栏： Unity 文章标签： Graphic 圆环 UGUI

本文链接：https://blog.youkuaiyun.com/wangjiangrong/article/details/107918646

前言

这篇简单的纪录下利用Graphic类，实现UGUI圆环的绘制。效果图如下：

github目录：https://github.com/luckyWjr/Demo

Unity如何绘制图形

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

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

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

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

Graphic

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

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

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

注：若想要支持RectMask2D功能，则改为继承MaskableGraphic即可

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

添加顶点

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

参数是顶点坐标，颜色以及uv，也可以直接添加我们前面提到的UIVertex：

VertexHelper.AddVert(UIVertex v)

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

List<Vector3> m_Positions;
List<Color32> m_Colors;
List<Vector2> m_Uv0S;
List<Vector2> m_Uv1S;
List<Vector2> m_Uv2S;
List<Vector2> m_Uv3S;
List<Vector3> m_Normals;
List<Vector4>