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

现在大多数游戏里面都是英雄或者角色属性的雷达图，来展示一个英雄的定位等直观信息。下图中是我们游戏里面的一个球员的属性雷达图和两个球员属性对比的雷达图。

一、雷达图的最终效果：

在这个demo中，我分别设置A、B、C、D四个快捷键来测试雷达图的展示效果，方便自己测试和美术看效果，A是随机生成雷达图属性值，B是从小到大生成雷达图，C是一个满属性雷达图，D是自己写死的一个数据展示一个定制数据的雷达图

二、雷达图功能拆解

从上面Demo视频中可以看出雷达图主要有6个环、11条维度线、11个最大属性点、以及属性数值的填充绘制。

1、顶点坐标的计算

首先要绘制上面的线和数据填充，就要计算出各个顶点的坐标，顶点坐标的计算可以按照下图的方式建立坐标系：

这要我们就可以通过熟悉中的三角函数来计算出各个顶点的坐标了

Vector2[]polygonVertex=newVector2[m_polygonCount + 1];

floatrad=2*Mathf.PI/m_polygonCount;

for(inti=0;i<m_polygonCount;i++)

{

floata=rad*i;

if(m_align==EAlign.Y_FORWARD){

a+=Mathf.PI/2.0f;

}

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

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

if(m_align==EAlign.Y_FORWARD)

{

if(m_drawDirection==EDirection.CLOCKWISE)

polygonVertex[i].x*=-1.0f;

}

else

{

if(m_drawDirection==EDirection.CLOCKWISE)polygonVertex[i].y*=-1.0f;

}

}

说明：2 * Mathf.PI = 360度，除于维度11就可以算出来每个维度占用的角度，然后再通过三函数和圆的半径，就可以求出各个坐标点了。

2、每一个环在11个维度上面的顶点坐标计算

通过第一步骤已经计算出了11个顶点的坐标点，然后把其中一个维度上的坐标点6等分，就可以算出每个维度上面的坐标点，然后通过for循环把11个维度都按照这种方式六等分，就可以求出11个维度上面每个维度的6个点的坐标值了。

for(intindex=0;index<m_polygonOuterCount;index++)

{

intvertexOffset=index*roundCount;

for(inti=0;i<m_polygonCount;i++)

{

polygonVertex[i]=bounds_[i]/m_polygonOuterCount*(index+1);

}

polygonVertex[bounds_.Length - 1]=polygonVertex[0];

}

说明：index=0，是最里面的一个圆线框，然后通过顶点坐标除于6，计算出每一个点的坐标。这样每一次循环就计算出了一层圆线框的各个点的坐标。polygonVertex[bounds_.Length - 1] = polygonVertex[0];这一句是把第一个顶点再次赋值给顶点数组中的最后一个，这样是为了方便后面遍历画三角形。

3、绘制雷达图属性填充区域

有了各个顶点数据就可以绘制雷达图中的属性填充区域了。比如一个英雄的11个属性值，有了这11个维度值就可以映射到这个雷达图的是一个维度上面，然后通过Unity的UI绘制接口，把中心点和两个属性点构成一个三角形，把这个三角形数据告诉Unity的绘制接口就可以绘制出一个三角形了。

说明：在绘制三角形的时，把三角形顶点数组数据和索引传给Unity的时候注意一下index的顺序，比如图三按照顺时针0.1.2的顺序添加索引，Unity底层就会按照我们的顺序进行绘制三角形。

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