CocosCreatorでクールなレーダーチャートを描く方法

this.angles = [];
// 軸間の角度 const iAngle = 360 / this.axes;
(i = 0 とします; i < this.axes; i++) {
    // 計算 const angle = iAngle * i;
    this.angles.push(角度);
}

// 2次元配列を作成します。let scalesSet: cc.Vec2[][] = [];
for (let i = 0; i < 軸上のスケールの数; i++) {
    // 現在のレイヤーのスケール座標を保存するために使用されます。let scales = [];
    // 軸上のスケールの位置を計算します。const length = axis length - (axis length / number of scales on the axis * i);
    (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(pos);
    }
    // 2次元配列をプッシュします scalesSet.push(scales);
}

// 最も外側のスケールをすべてトラバースします for (let i = 0; i < scalesSet[0].length; i++) {
    // ブラシを中心点に移動します this.graphics.moveTo(0, 0);
    // 線を作成します this.graphics.lineTo(scalesSet[0][i].x, scalesSet[0][i].y);
}

// ブラシを最初のポイントに移動します this.graphics.moveTo(scalesSet[0][0].x, scalesSet[0][0].y);
(i = 1; i < scalesSet[0].length; i++) の場合 {
    // 線を作成します this.graphics.lineTo(scalesSet[0][i].x, scalesSet[0][i].y);
}
// 現在の行（外側のグリッド線）を閉じる
this.graphics.close();

// 線で囲まれた空白領域を塗りつぶします this.graphics.fill();
// 作成した線（軸線と外側のグリッド線）を描画します
this.graphics.stroke();

// スケールの数が 1 より大きい場合にのみ内側のグリッド線を描画します if (scalesSet.length > 1) {
    // 下から 1 から開始します (下付き文字 0 は外側のグリッド線です)
    (i = 1 とします; i < scalesSet.length; i++) {
        // ブラシを最初のポイントに移動します this.graphics.moveTo(scalesSet[i][0].x, scalesSet[i][0].y);
        (j = 1; j < scalesSet[i].length; j++) の場合 {
            // 線を作成します this.graphics.lineTo(scalesSet[i][j].x, scalesSet[i][j].y);
        }
        // 現在の行（内側のグリッド線）を閉じる
        this.graphics.close();
    }
    // 作成した線（内側のグリッド線）を描画します
    this.graphics.stroke();
}

/**
 * レーダーチャートデータ */
エクスポートインターフェースRadarChartData {

    /** 価値 */
    値: 数値[];

    /** 線の幅 */
    線幅?: 数値;

    /** 線の色 */
    線の色?: cc.Color;

    /** 塗りつぶし色 */
    塗りつぶしの色?: cc.Color;

    /** ノードの色 */
    cc.Color を結合しますか?

}

/**
 * 描画データ * @param data データ */
パブリック描画(データ: RadarChartData | RadarChartData[]) {
    // データを処理 const datas = Array.isArray(data) ? data : [data];

    // データの描画を開始します for (let i = 0; i < datas.length; i++) {
        // 染料をロードします this.graphics.strokeColor = datas[i].lineColor || defaultOptions.lineColor;
        this.graphics.fillColor = datas[i].fillColor || defaultOptions.fillColor;
        this.graphics.lineWidth = datas[i].lineWidth || defaultOptions.lineWidth;

        // ノード座標を計算する let coords = [];
        (j = 0; j < this.axes; j++) の場合 {
            定数値 = datas[i].values[j] > 1 ? 1 : datas[i].values[j];
            定数長さ = 値 * this.axisLength;
            const ラジアン = (Math.PI / 180) * this.angles[j];
            const pos = cc.v2(長さ * Math.cos(ラジアン), 長さ * Math.sin(ラジアン))
            座標をプッシュします。
        }

        // 線を作成します this.graphics.moveTo(coords[0].x, coords[0].y);
        (j = 1; j < coords.length; j++) の場合 {
            this.graphics.lineTo(座標[j].x, 座標[j].y);
        }
        this.graphics.close(); // 線を閉じます // 囲まれた領域を塗りつぶします this.graphics.fill();
        // 線を描画します this.graphics.stroke();

        // データノードを描画する for (let j = 0; j < coords.length; j++) {
            // 大きな円 this.graphics.strokeColor = datas[i].lineColor || defaultOptions.lineColor;
            this.graphics.circle(座標[j].x, 座標[j].y, 2);
            this.graphics.stroke();
            // 小さな円 this.graphics.strokeColor = datas[i].joinColor || defaultOptions.joinColor;
            this.graphics.circle(座標[j].x, 座標[j].y, .65);
            this.graphics.stroke();
        }

    }
}

// 現在のレーダーチャートデータ private curDatas: RadarChartData[] = [];

保護された更新() {
    if (!this.keepUpdating) 戻り値:
    // 現在のデータを描画します this.draw(this.curDatas);
}

/**
 * スローモーション描画* @param data ターゲットデータ* @paramduration アニメーション期間*/
パブリック to(データ: RadarChartData | RadarChartData[], 期間: 数値) {
    // 繰り返しの呼び出しを処理します this.unscheduleAllCallbacks();
    
    // 単一のデータ部分をパックします const datas = Array.isArray(data) ? data : [data];

    // 各フレームの更新をオンにします this.keepUpdating = true;

    // 動く！
    (i = 0 とします; i < datas.length; i++) {
        // 値をアニメーション化します。
        // データ内のすべての値を走査し、1つずつ移動させます。
        (j = 0 とします; j < this.curDatas[i].values.length; j++) {
            // 最大値を 1 (つまり 100%) に制限します
            定数値 = datas[i].values[j] > 1 ? 1 : datas[i].values[j];
            cc.tween(this.curDatas[i].values)
                .to(期間, { [j]: 値 })
                。始める（）;
        }
        // 動きのあるスタイル!
        // 指定されていない場合は、元のスタイルが使用されます。
        cc.tween(this.curDatas[i])
            .to(期間, {
                線幅: datas[i].lineWidth || this.curDatas[i].lineWidth,
                線の色: datas[i].lineColor || this.curDatas[i].lineColor,
                塗りつぶし色: datas[i].fillColor || this.curDatas[i].fillColor,
                結合カラー: datas[i].結合カラー || this.curDatas[i].結合カラー
            })
            。始める（）;
    }

    this.scheduleOnce(() => {
        // 各フレームの更新をオフにします this.keepUpdating = false;
    }、 間隔）;
}