*Egret(白鹭) 多边形数据图

---

*Egret 多边形数据图

在游戏中经常会遇到角色能力图的功能，主要实现为绘制多边形遮罩

设置背景图的父物体遮罩从而实现多边形数据能力图

为大佬呈上关键代码：

    //画出数值图形 list:需要设置的点
    private drawLine(list) {
        let len = list.length;
        this.shp.graphics.clear();
        this.shp.graphics.lineStyle(1, 0xff0000);
        this.shp.graphics.beginFill(0xff0000)
        this.shp.graphics.moveTo(list[0].x, list[0].y);
        for (let i: number = 0; i < len; i++) {
            if (list[i + 1])
                this.shp.graphics.lineTo(list[i + 1].x, list[i + 1].y);
            else
                this.shp.graphics.lineTo(list[0].x, list[0].y);
        }
        this.shp.graphics.endFill();
        this.maskGroup.mask = this.shp;
    }
     //计算画点的位置 dot:原点 percentage:百分比
    private calculateDotPoint(dot, percentage): egret.Point {
        let xPoor;
        let yPoor;
        let x;
        let y;
        percentage = 1 - percentage;
        if (dot.x > this.originDot.x) {
            xPoor = dot.x - this.originDot.x;
            x = dot.x - xPoor * percentage;
        }
        else {
            xPoor = this.originDot.x - dot.x;
            x = dot.x + xPoor * percentage;
        }
        if (dot.y > this.originDot.y) {
            yPoor = dot.y - this.originDot.y;
            y = dot.y - yPoor * percentage;
        }
        else {
            yPoor = this.originDot.y - dot.y;
            y = dot.y + yPoor * percentage;
        }
        return new egret.Point(x, y);
    }

实现效果：