雷達圖的一種實現！ Cocos Creator ！

支持定義任意多個屬性值，簡單好用！文章底部獲取完整代碼！

如何使用

1. 新建一個節點
2. 爲節點添加graphics組件
3. 添加用戶腳本radar
4. 調整對應參數

實現原理

需求能夠轉化成如何畫一個有特色的多邊形。

先觀察一下，雷達圖的每一個屬性有什麼特色。

能夠看到每一個屬性值，都是在固定虛線上移動。

並且每條線的夾角都是同樣的。這個夾角就是 360度 除以 總共屬性數量。

const radians_per = Math.PI * 2 / this.side_count;

因此咱們能夠按照屬性次序肯定與x軸的夾角。若是咱們把第一個屬性值放在y軸，那麼初始角度爲 90。

// 初始邊放在y軸，多90度
const radians = side_i * radians_per + Math.PI / 2;

虛線的長度能夠由總長度和須要的百分比求出。

const side_length = this.side_max_length * percent;

接着根據極座標到直角座標系的轉換，就能求出該屬性的座標。

// 座標計算 x = r * cos   y = r * sin
const posX = side_length * Math.cos(radians);
const posY = side_length * Math.sin(radians);

最後將全部的點連起來，完成雷達圖的繪製。完整的繪製代碼以下。

this.graphics.clear();
// 每一個夾角
const radians_per = Math.PI * 2 / this.side_count;
for (let side_i = 0; side_i < this.side_count; side_i++) {
    const percent = (this.side_percent[side_i] || 0) / 100;
    // 每一個邊的長度
    const side_length = this.side_max_length * percent;
    // 初始邊放在y軸，多90度
    const radians = side_i * radians_per + Math.PI / 2;
    // 座標計算 x = r * cos   y = r * sin
    const posX = side_length * Math.cos(radians);
    const posY = side_length * Math.sin(radians);
    if (side_i === 0) {
        this.graphics.moveTo(posX, posY);
    } else {
        this.graphics.lineTo(posX, posY);
    }
}
this.graphics.close();
this.graphics.stroke();
this.graphics.fill();

以上爲白玉無冰使用 Cocos Creator v2.2.2 開發"雷達圖"的技術分享。更多精彩歡迎關注wx公中號【白玉無冰】！若是這篇對你有點幫助，歡迎分享給身邊的朋友。

完整代碼