LayaBox游戏项目实录四：游戏中多边形属性雷达图

目录

前言

准备知识

如何画多边形

画多边形：

画圆心点到多边形顶点的线段

绘制数据点组成的多边形

封装代码

外部调用

---

前言

游戏项目中经常用到多边形雷达图，来表示人物的属性分布：

像这种：

（注：以上图片均来源自网络，不做任何商业用途）

那今天跟随游戏项目，用 laya 画一个通用的属性雷达图。

准备知识

首先，任何雷达图都离不开圆，像下面这种，我们首先要明确一个概念：雷达图是建立在圆的内切图当中。

 （注：以上图片均来源自网络，不做任何商业用途）

如何画多边形

以正五边形雷达图为例，其他任意正多边形也一样，画图的原点在圆心（0,0），以r为半径作圆，作为正五边形的外接圆，则正五边形每条边所对应的圆心角均为 rad = 2*Math.PI/5。再根据正余弦可以求得每个定点所对应的坐标，这样一个正五边形就可以画出来了。

有了以上思想，我们来写代码：

画多边形：

        let rad = 2 * Math.PI/step;// 五变形的圆心角  
        // 从外到内画是个五边形      
        for(let s = 10; s > 0; s--){
            let sp = new Laya.Sprite();
            this.addChild(sp);
            // 绘制多边形
            let path:number[] = [];
            for (let i = 0; i < 5; i++) {
                let tmpRad = rad * i;
                var x = Math.sin(tmpRad) * r * (s/ceng);
                var y = Math.cos(tmpRad) * r * (s/ceng);
                path.push(x, y);
            }
            // laya 提供的画多边形方法
            sp.graphics.drawPoly(0, 0, path, fillColor, lineColor, lineWidth);
        }

画圆心点到多边形顶点的线段

         // 绘制中心点到顶点的线段
        for(var i = 0; i < 5; i++){
            let sp = new Laya.Sprite();
            this.addChild(sp);
            let tmpRad = rad * i;
            let x = Math.sin(tmpRad) * r;
            let y = Math.cos(tmpRad) * r;
            sp.graphics.drawLine(0, 0, x, y, cvColor, cvWidth);
        }

绘制数据点组成的多边形

        // 绘制数据点组成的多边形
        let data = [0.5, 0.63, 0.42, 0.81, 0.76]; // 数据分布
        let sp = new Laya.Sprite();
        sp.alpha = 0.5;
        this.addChild(sp);
        let path:number[] = [];
        for (let i = 0; i < step; i++) {
            let tmpRad = rad * i;
            var x = Math.sin(tmpRad) * r * data[i];
            var y = Math.cos(tmpRad) * r * data[i];
            path.push(x, y);
        }
        sp.graphics.drawPoly(0, 0, path, dfcolor, dlcolor, dlwidth);

效果图如下：

封装代码

新建一个雷达图类：RadarMap 继承于 Laya.Sprite，用于外部整体调用。

export default class RadarMap extends Laya.Sprite
{
    constructor(){
        super();
    }
  
    /**
     * 绘制多边形雷达图
     * @param r 半径大小
     * @param data  数据分布
     * @param ceng  多边形内圈数
     * @param dfcolor 数据构成的多边形填充颜色
     * @param dlcolor 数据构成的多边形边线颜色
     * @param dlwidth 数据构成的多边形边线宽度
     * @param fillColor 外圈多边形填充颜色
     * @param lineColor 外圈多边形边线颜色
     * @param edgeWidth 外圈多边形边线宽度
     * @param cvColor 中心点到顶点的线段颜色
     * @param cvWidth 中心点到顶点的线段宽度
     */
    drawMap(r:number, data:number[], ceng:number = 1, dfcolor:string = "#c78c00", dlcolor:string = null, dlwidth:number = 1, fillColor:string = null, lineColor:string = "#f1f9ff", edgeWidth:number = 1, cvColor:string = "#e0e0e0", cvWidth:number = 1):void {

        this.destroyChildren();

        let step = data.length; // 边数
        let rad = 2 * Math.PI/step;// 多边形的圆心角
        this.width = r * 2; // 宽
        this.height = r * 2; // 高
        
        for(let s = ceng; s > 0; s--){
            let sp = new Laya.Sprite();
            this.addChild(sp);
            // 绘制多边形
            let path:number[] = [];
            for (let i = 0; i < step; i++) {
                let tmpRad = rad * i;
                var x = Math.sin(tmpRad) * r * (s/ceng);
                var y = Math.cos(tmpRad) * r * (s/ceng);
                path.push(x, y);
            }
            sp.graphics.drawPoly(0, 0, path, fillColor, lineColor, edgeWidth);
        }
        // 绘制中心点到顶点的线段
        for(var i = 0; i < step; i++){
            let sp = new Laya.Sprite();
            this.addChild(sp);
            let tmpRad = rad * i;
            let x = Math.sin(tmpRad) * r;
            let y = Math.cos(tmpRad) * r;
            sp.graphics.drawLine(0, 0, x, y, cvColor, cvWidth);
        }
        // 绘制数据点组成的多边形
        let sp = new Laya.Sprite();
        sp.alpha = 0.5;
        this.addChild(sp);
        let path:number[] = [];
        for (let i = 0; i < step; i++) {
            let tmpRad = rad * i;
            var x = Math.sin(tmpRad) * r * data[i];
            var y = Math.cos(tmpRad) * r * data[i];
            path.push(x, y);
        }
        sp.graphics.drawPoly(0, 0, path, dfcolor, dlcolor, dlwidth);
    }

}

外部调用

 let rm = new RadarMap(); // 雷达图
 let r = 150; // 半径
 let data = [0.5, 0.63, 0.42, 0.81, 0.76, 0.8]; // 数据分布
 rm.drawMap(r, data, 5); 
        

 效果如下：