(一) 雷达图介绍
介绍:
雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法,它利用代表各项数据占比的顶点位置连接成面状,直观的反应当前事物的一个能力倾向。
例如下图:我们能直观的看到该玩家对于(输出,发育)两项的能力比较好?
(二)UGUI实现雷达显示图的原理
雷达图基本原理介绍:
(这里我们以正五边形的雷达背景图为例,其他正多边形原理相同)
1.我们首先需要具备一张美术的雷达背景图,之后在背景图下创建Image;
2.之后重写image的OnPopulateMesh(VertexHelper vh)函数,清空所有顶点信息(VertexHelper.Clear() 清空后该image就不会进行显示);
3.之后我们需要构建五边形的5个顶点(初始位置在正五边形的五个顶点位置),之后创建外部系数控制5项数据的大小,得到5个顶点的最终显示位置,之后3个顶点构成面即可;
4.重新给VertexHelper对象添加顶点信息,三角面信息,我们原始的Image就会显示为五边形形状 来表现数据倾向。
大致来说:
我们游戏中的雷达图都是接收了数据源,计算得到该数据源每项占各项最大限度的比值,之后将原本的各项顶点的位置Position与比值相乘,得到新的顶点位置Position,再利用OnPopulateMesh(VertexHelper vh)重新绘制显示面。
Image重新绘制图形API:
了解:Image类继承自MaskableGraphic,实现了ISerializationCallbackReceiver, ILayoutElement, ICanvasRaycastFilter这三个接口。最关键的是MaskableGraphic类,MaskableGraphic负责绘制逻辑,MaskableGraphic继承自Graphic,Graphic里有个OnPopulateMesh函数,这正是我们需要的函数。