在 Cocos Creator 里画个炫酷的雷达图

前言

🕸️雷达图（Radar Chart） 也称为网络图、星图或蜘蛛网图。

是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多元数据的图形方法。

适用于显示三个或更多的维度的变量。

🕸️雷达图常用于📚数据统计或对比，对于查看哪些变量具有相似的值、变量之间是否有异常值都很有用。

🎮同时在不少游戏中都有雷达图的身影，可以很直观地展示并对比一些数据。

例如王者荣耀中的对战资料中就用到了：

🔎那么在本篇文章中，皮皮就来分享下在 Cocos Creator 中如何利用 Graphics 组件来绘制炫酷的雷达图~

文中会对原始代码进行一定的削减以保证阅读体验。

雷达图组件：https://gitee.com/ifaswind/eazax-ccc/blob/master/components/RadarChart.ts

---

预览

😲先来看看效果吧~

在线预览：https://ifaswind.gitee.io/eazax-cases/?case=radarChart

😃两条数据

😮缓动数据

😵花里胡哨

😱艺术就是爆炸

😈逐渐偏离主题

🙌 没有人

👐 比我

👌 更懂

☝️ 花里胡哨

（👱川老师直呼内行）

---

正文

🎭Graphics 组件

在我们正式开始制作雷达图之前，让我们先来大概了解一下 Cocos Creator 引擎中的 Graphics 组件。

Graphics 组件继承于 cc.RenderComponent，利用该组件我们可以实现画板和表格之类的功能。

属性（Properties）

下面是我们本次将会用到的属性：

• lineCap：设置或返回线条两端的样式（无、圆形线帽或方形线帽）
• lineJoin：设置或返回两条线相交时的拐角样式（斜角、圆角或尖角）
• lineWidth：设置或返回当前画笔的粗细（线条的宽度）
• strokeColor：设置或返回当前画笔的颜色
• fillColor：设置或返回填充用的颜色（油漆桶）

函数（Functions）

下面是我们本次将会用到的函数：

• moveTo(x, y)：抬起画笔并移动到指定位置（不创建线条）
• lineTo(x, y)：放下画笔并创建一条直线至指定位置
• circle(cx, cy, r)：在指定位置（圆心）画一个圆
• close()：闭合已创建的线条（相当于 lineTo(起点)）
• stroke()：绘制已创建（但未被绘制）的线条（将线条想象成默认透明的，此行为则是赋予线条颜色）
• fill()：填充当前线条包围的区域（如果线条没有闭合则会尝试”模拟闭合“起点和终点）
• clear()：擦掉当前画板上的所有东西

Graphics 组件文档：http://docs.cocos.com/creator/manual/zh/components/graphics.html?h=graphics

🎨画网格

捋一捋

先来看看一个标准的雷达图有啥特点：

🔮发现了吗？雷达图的基本特点如下：

• 有 3 条或以上的轴线
• 轴与轴之间的夹角相同
• 每条轴上除中心点外应至少有 1 个刻度
• 每条轴上都有相同的刻度
• 刻度与刻度之间的距离也相同
• 轴之间的刻度相连形成网格线

动手吧

计算轴线角度

先算出轴之间的夹角度数 [ 360 ÷ 轴数 ]，再计算所有轴的角度：

this.angles = [];
// 轴间夹角
const iAngle = 360 / this.axes;
for (let i = 0; i < this.axes; i++) {
   
    // 计算
    const angle = iAngle * i;
    this.angles.push(angle);
}

计算刻度坐标

雷达图至少拥有 3 条轴，且每条轴上都应有 1 个或以上的刻度（不包含中心点）：

所以我们需使用一个二维数组来保存所有刻度的坐标，从最外层（即轴线的末端）的刻度开始记录，方便我们绘制时读取：

// 创建一个二维数组
let scalesSet: cc.Vec2[][] = [];
for (let i = 0; i < 轴上刻度个数; i++) {
   
    // 用来保存当前层上的刻度坐标
    let scales = [];
    // 计算刻度在轴上的位置
    const length = 轴线长度 - (轴线长度 / 轴上刻度个数 * i);
    for (let j = 0; j < this.angles.length; j++) {
   
        // 将角度转为弧度
        const radian = (Math.PI / 180) * this.angles[j];
        // 根据三角公式计算刻度相对于中心点（0, 0）的坐标
        const pos = cc.v2(length * Math.cos(radian), length * Math.sin(radian));
        // 推进数组
        scales.push(