角色属性多维图制作实现

使用creator制作的游戏中人物属性使用多维图表示

以五维图为例，从上顶点开始，依次代表属性1（A）、属性2（B）、属性3（C）、属性4（D）、属性5（E）如图

场景中的节点结构     

代码如下：

 

const { ccclass, property } = cc._decorator;

 

@ccclass

export default class NewClass extends cc.Component {

 

    @property(cc.Sprite)

    public pentagonBg: cc.Sprite = null;                 //五维图的背景

    @property(cc.Mask)

    public maskNode: cc.Mask = null;                     //遮罩节点

    @property(cc.Sprite)

    public pentagon: cc.Sprite = null;                   //五维图

    @property(cc.Graphics)

    public pinNode: cc.Graphics = null                   //图钉

 

    private graphics: cc.Graphics;                       //绘画组件

    private pentagonR: number = 100;                     //半径

    private points: cc.Vec2[] = [];                      //存储五个顶点位置的数组

 

    //角色五种属性的最大值（攻击、防御、速度、智力。。。）

    private readonly maxA: number = 1000;

    private readonly maxB: number = 1500;

    private readonly maxC: number = 1200;

    private readonly maxD: number = 800;

    private readonly maxE: number = 1000;

 

    //角色当前等级下的五种属性的值

    public A: number = 900;

    public B: number = 1300;

    public C: number = 500;

    public D: number = 600;

    public E: number = 850;

 

    public start(): void {

        this.maskNode.type = cc.Mask.Type.RECT;         //设置mask的遮罩类型

        this.maskNode.inverted = false;

        this.graphics = (<any>this.maskNode)._graphics; //提取五边形Graphics

        this.pinNode.fillColor = cc.Color.YELLOW;       //设置图钉的颜色

 

        this.getVerticePoint();

    }

 

    //获取五个顶点位置在五维图上的坐标

    public getVerticePoint(): void {

        //上方 A

        const x0 = 0;

        const y0 = this.pentagonR * this.A / this.maxA;

        this.points.push(new cc.Vec2(x0, y0));

        //左上 B

        const x1 = Math.sin(72 / 180 * Math.PI) * this.pentagonR * this.B / this.maxB;

        const y1 = Math.cos(72 / 180 * Math.PI) * this.pentagonR * this.B / this.maxB;

        this.points.push(new cc.Vec2(x1, y1));

        //左下 C

        const x2 = Math.cos(54 / 180 * Math.PI) * this.pentagonR * this.C / this.maxC;

        const y2 = -Math.sin(54 / 180 * Math.PI) * this.pentagonR * this.C / this.maxC;

        this.points.push(new cc.Vec2(x2, y2));

        //右下 D

        const x3 = - Math.cos(54 / 180 * Math.PI) * this.pentagonR * this.D / this.maxD;

        const y3 = -Math.sin(54 / 180 * Math.PI) * this.pentagonR * this.D / this.maxD;

        this.points.push(new cc.Vec2(x3, y3));

        //右上 E

        const x4 = -Math.sin(72 / 180 * Math.PI) * this.pentagonR * this.E / this.maxE;

        const y4 = Math.cos(72 / 180 * Math.PI) * this.pentagonR * this.E / this.maxE;

        this.points.push(new cc.Vec2(x4, y4));

 

        this.pinNode.clear()//清除旧数值点

        for (const point of this.points) {//创建新数值点

            this.pinNode.circle(point.x, point.y, 3);

        }

        this.pinNode.fill();//填充数值点

 

        this.drawMaskPentagon();

    }

 

    //绘制角色属性的五维图

    public drawMaskPentagon(): void {

        this.graphics.clear();//擦除之前绘制出的图形

        this.graphics.moveTo(this.points[0].x, this.points[0].y);//移动路径起点到坐标

        for (let i = 1, len = this.points.length; i < len; i++) {

            this.graphics.lineTo(this.points[i].x, this.points[i].y);//画线  绘制直线路径

        }

        this.graphics.close();//将笔点返回到当前路径起始点的。它尝试从当前点到起始点绘制一条直线

        this.graphics.fill();//填充五边形 根据当前的画线样式，填充当前或已经存在的路径。

    }

}

附参考：https://mp.weixin.qq.com/s/P4kp1vHMk30GdMRnKzb3eA