Unity中绘制属性雷达图《二》

上一篇文章中介绍了雷达图的顶点计算

炉石不传说：Unity中绘制属性雷达图《一》​zhuanlan.zhihu.com      这篇文章主要介绍绘制原理以及绘制代码。

一、绘制原理

我们知道计算机图形绘制中最基本的图元为三角形，所以我们需要把我们绘制的雷达图拆解为三角形，然后将这些三角形的顶点数据传递给图形API接口，计算机才能绘制出我们想要的图形。在Unity中绘制UI的API就是OnPopulateMesh(VertexHelper vh)这个函数了。我们只需要把数据传个它，剩下的工作就由Unity帮我们完成了。

首先我们看一下这个函数OnPopulateMesh的参数VertexHelper ，它主要是提供绘制三角形的API。我在雷达图中使用了AddUIVertexStream(List verts, List indices)绘制接口，提供顶点列表和顶点索引的方式来绘制，你也可以选择绘制矩形的接口AddUIVertexQuad(UIVertex[] verts)，最终实现效果都是一样的，根据个人习惯选择绘制接口。下图是这个VertexHelper 类的接口函数：

二、雷达图的绘制代码讲解

一、OnPopulateMesh函数

1、polygonVertex用于存储多边形顶点数据，大小+1是为了绘制的时候去点方便。

2、float rad = 2 * Mathf.PI / m_polygonCount;把圆周平分成11个维度，然后计算出每个维度的弧度值rad。

3、已知斜边和夹角，根据三角函数计算出每个顶点的坐标值。

polygonVertex[i].x = m_center.x + m_radius * Mathf.Cos(a);

polygonVertex[i].y = m_center.y + m_radius * Mathf.Sin(a);

4、特殊枚举值含义

EAlign.Y_FORWARD是标记起始坐标点是从X轴开始还是Y轴还是

EDirection.CLOCKWISE是标记这次绘制填充数据三角的顺序是按照顺时针还是逆时针

5、vh_.AddUIVertexStream(m_vertexs, m_triangles)是Unity绘制接口，传入顶点和顶点索引按照顺序进行绘制。

二、DrawRadarBackground函数

一般雷达图背景都是有美术提供底图就可以了，不需要我们绘制，不过这里也给出了绘制方式。

1、m_polygonOuterCount环线框的个数，m_polygonCount雷达的维度个数。然后利用两次for循环，一个一个圆线框的绘制，

2、计算出第一个环线框的11个维度的坐标值。

3、m_vertexs顶点数据的处理。因为绘制一条直线需要两个三角形，所以需要把顶点分成两个点，这样2个维度的顶点就变成了4个点，就可以绘制一个矩形了即表现上就是一条线。

for(inti=0;i

{

Vector2dir=polygonVertex[i].normalized;

m_vertexs.Add(newUIVertex(){position=polygonVertex[i]-dir*m_lineWidthBg,color=m_lineColorBg});

m_vertexs.Add(newUIVertex(){position=polygonVertex[i]+dir*m_lineWidthBg,color=m_lineColorBg});

}

4、顶点索引数据的处理。注意三角形的绘制顺序，别出现绘制的顺序没有办法构造矩形就可以了。

5、绘制等宽直线，有一个难点就是dir的值怎么计算。其实就是先计算两个点的连线，然后再计算此向量的垂直向量，最后标椎化normal就可以了。

GetNormalizedVerticalVector是就通过垂直的两个向量的点乘为0的性质来计算的。

三、DrawRadarDotLine

绘制顶点连线，只需要拿到顶点的坐标，然后按照等宽绘制线就可以了。关键点还是GetNormalizedVerticalVector函数

四、DrawRadar

绘制雷达数据填充比较简单，这个只需要绘制三角形就了，中心点就是雷达的坐标原点，然后其他两个取自维度的顶点就可以绘制一个三角形。

一般雷达图的底图可以让美术提供一张就可以了，不需要我们动态绘制，我们只需要绘制里面的填充和最大顶点已经顶点连线就可以了。关于脚本怎么使用，自己下载源码看一下就明白了，非常简单，可调参数都抛到Inspector面板上面了。

下面是源码的下载地址：https://download.csdn.net/download/hongkenzhao/12477472

由于不支持代码的展示，想看完整代码可以下载上面完整工程或者去下面知乎链接查看

该文章同时发布于知乎： Unity中绘制属性雷达图《二》 - 知乎