Unity 实现带均匀描边的雷达图

Doris232 · 发表于 2023-3-1 18:56

前言

雷达图是游戏中常见的图表表现之一，比如用来呈现英雄的属性等等，本文将在 Unity 中实现一个带均匀描边、可响应点击的雷达图。
Graphic类

Unity 的原生 UI 系统 UGUI 提供了名为 Graphic 的基类用于实现各自 UI组件的。该类中有名为 OnPopulateMesh 的方法，只要向参数 VertexHelper 传递正确的顶点数组与下标数组，即可构造出我们期望的网格。
网格的构建

雷达图可以视为一个正多边形各个顶点沿着径向缩放得到，因此我们只要遍历一遍各个角度并且根据当前角度的权重计算就能得到对应的顶点，最后构造下标数组，即可得到所需网格。构造顶点代码如下

这样对于边数为 N 的雷达图，我们会得到包括中心点在内的 N + 1 个顶点，然后是构造下标数组，代码如下。

只是简单地把相邻的顶点两两与中心点组合成三角形，注意这里最后复用了第一个顶点。
响应点击

Unity 的 UI 组件，响应点击需要实现接口 ICanvasRaycastFilter 的 IsRaycastLocationValid 方法。如果命中多边形，也就是点击坐标落在多边形内，则返回 true ，否则返回 false。首先需要将方法参数里的屏幕坐标转换到ui的局部坐标。

然后检测坐标是否落在多边形内，对于点击的坐标，我们检测从它出发发射一条指向多边形外的某个顶点的射线，对于多边形的每一条边，检测是否相交，最后统计相交的边的数目，如果为奇数，则代表该点落在多边形内，否则落在多边形外。更多详情可以参考下面的问题。
代码如下

做完这些就实现了一个可响应点击的雷达图了。

描边

一开始觉得这就不算个问题，搞两个权重一样但是半径不一样的雷达图不就能实现了嘛。试了试发现，问题没有这么简单。

因为权重不均匀，所以会导致描边也不均匀，为了实现均匀的描边，还需要额外的工作。
解决办法是额外进行边的绘制。对于多边形的每一个顶点 C ，我们按逆时针方向找出它的上一个 A 与下一个顶点 B ，并且得到它相邻的两条边的向外的垂线，把 A 与 B 沿着垂线向外延伸得到 E 与 F，把 E 与 F 沿着边的方向延伸，相交于点 P，对每个顶点重复上述步骤，就能得到外框的所有点了。

顶点构造代码

下标数组构造

获得交点

获得垂线

最后看效果

总结

网上 Unity 实现雷达图的代码能找到不少，但是我发现基本都止步于网格的构造，并没有将点击响应的计算以及均匀描边的实现，有的更过分，甚至连 uv 都不肯算，没办法只能自己撸一个，把一些中学几何的东西又捡起来过了一遍，总的来说，这个过程还是有所收获的。

xiaozongpeng · 发表于 2023-3-1 19:03

文章不错，我是被封面炸进来的[害羞]

RhinoFreak · 发表于 2023-3-1 19:11

[惊喜]

franciscochonge · 发表于 2023-3-1 19:13

你这图是什么意思

Arzie100 · 发表于 2023-3-1 19:21

没啥特别的意思，只是我喜欢

Baste · 发表于 2023-3-1 19:24

文章写的很性奋，Unity是啥意思？

七彩极 · 发表于 2023-3-1 19:32

问一个问题

		自动登录	找回密码
密码			立即注册

Unity 实现带均匀描边的雷达图

本帖子中包含更多资源