egret 扇形图表

小道s

已于 2023-10-20 10:53:48 修改

阅读量95

点赞数 1

分类专栏： egret 文章标签： typescript

于 2021-08-26 17:53:48 首次发布

本文链接：https://blog.csdn.net/mj910627/article/details/119937105

版权

egret 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

egret 扇形图表

最终效果：
在这里插入图片描述

//调用画图函数
this.drawArc(this, [
            { percentage: 0.6, color: 0xe34f4f },
            { percentage: 0.2, color: 0xffff00 },
            { percentage: 0.2, color: 0x00ff00 },
        ], 68)
/**扇形图表
     * @info 扇形比例总和为 1
     * @param container egret.DisplayObjectContainer 容器
     * @param sectorDates 扇形数据 {percentage:比例,color:颜色} 
     * @param radius number 半径
     * @param offset 图表偏移位置
     */
    private drawArc(container: egret.DisplayObjectContainer, sectorDates: { percentage: number, color: number }[], radius: number = 68, offset: number = 50): void {
        if (!sectorDates || sectorDates.length === 0) return;
        //图表偏移位置
        let i: number = 0, len: number = sectorDates.length;
        //偏移角度
        let offerAngle: number = 0;
        for (; i < len; i++) {
            let sectorDate = sectorDates[i];
            if (!sectorDate.percentage) continue;
            //计算角度
            let angle = sectorDate.percentage * 360;
            let curAngle = (angle + offerAngle);
            //起始弧度
            let startAngle = offerAngle * Math.PI / 180;
            //结束弧度
            let endAngle = curAngle * Math.PI / 180;
            //开始画扇形
            let sector: egret.Shape = new egret.Shape();
            sector.graphics.beginFill(sectorDate.color, 1);
            sector.graphics.moveTo(radius, radius)//绘制点移动(r, r)点
            sector.graphics.lineTo(radius * 2, radius);//画线到弧的起始点
            sector.graphics.drawArc(radius, radius, radius, startAngle, endAngle, false);//从起始点顺时针画弧到终点
            sector.graphics.lineTo(radius, radius);//从终点画线到圆形。到此扇形的封闭区域形成
            sector.graphics.endFill();
            sector.x = offset;
            sector.y = offset;
            container.addChild(sector);

            //------------------------------------------引导线--------------------------------------------
            //弧度中心点
            let center = offerAngle + angle * 0.5;
            let sins = Math.sin(2 * Math.PI / 360 * center);
            let coss = Math.cos(2 * Math.PI / 360 * center);
            let lineLen: number = 16;
            //起始点
            let startPoint = new egret.Point(coss * radius + radius, sins * radius + radius);
            //结束点
            let endPoint = new egret.Point();
            //延长线
            let addPoint = new egret.Point();
            let isLeft: boolean;

            if (center > 180) {//上
                endPoint.y = startPoint.y - lineLen;
            } else {//下
                endPoint.y = startPoint.y + lineLen;
            }
            if (center > 90 && center < 270) {//左
                endPoint.x = startPoint.x - lineLen;
                addPoint.x = endPoint.x - lineLen;
                isLeft = true;
            } else {//右
                endPoint.x = startPoint.x + lineLen;
                addPoint.x = endPoint.x + lineLen
            }
            addPoint.y = endPoint.y;

            //开始划线
            let line = new egret.Shape();
            line.graphics.lineStyle(2, sectorDate.color);
            line.graphics.moveTo(startPoint.x, startPoint.y);
            line.graphics.lineTo(endPoint.x, endPoint.y);
            line.graphics.lineTo(addPoint.x, addPoint.y);
            line.graphics.endFill();
            line.x = offset
            line.y = offset;
            container.addChild(line);

            //文本
            let label = new egret.TextField();
            label.text = Math.floor(sectorDate.percentage * 100) + "%"
            if (isLeft) label.x = offset + addPoint.x - label.width;
            else label.x = offset + addPoint.x
            label.y = offset + addPoint.y - label.height * 0.5;
            container.addChild(label);
            //角度偏移计算
            offerAngle += angle;
        }
    }