egret游戏引擎入门（七）

今天分享几个封装的egret方法。
之前也调研过createjs，感觉egret的绘画API跟createjs的相似，或者说，这一类都是大同小异的。虽然这些方法相较原声的canvas简单一点，但是感觉还是有些繁杂，可以将这些方法封装一下进行调用。
1. 根据资源名称创建图片Bitmap
当我们新建一个egret项目的时候，就会在Main.ts中发现这个方法。这个方法直接传入一个在default.res.json中定义好的图片资源名称，就可以返回一个egret.Bitmap对象。其实这也就是在提示我们将文字、绘图等方法进行封装，使用起来会更加高效。

function createBitmapByName(name: string): egret.Bitmap {
    const resource: egret.Bitmap = new egret.Bitmap();
    const texture: egret.Texture = RES.getRes(name);
    resource.texture = texture;
    return resource;
}

1. 创建文本类TextFiled

/**
 * 创建文本类TextFiled
 *
 * @param {string} text 要显示的文字
 * @param {number} color 文字的颜色
 * @param {number} [size=20] 文字的大小
 * @param {number} [x=0] 文字的x坐标
 * @param {number} [y=0] 文字的y坐标
 */
function createText(text: string, color: number, size: number = 20, x: number = 0, y: number = 0): egret.TextFiled {
    const resource: egret.TextFiled = new egret.TextFiled();
    resource.text = text;
    resource.color = textColor;
    resource.size = size;
    resource.x = x;
    resource.y = y;
}

1. 创建带有矢量绘制功能的显示容器sprite
   个人感觉这个方法使用的相当频繁，因为我是将sprite作为一个组件去使用的。打个比方来说，我要创建一张卡牌，那么我先创建一个sprite并将其添加到场景上，然后再创建一些卡牌的图案或者文字，添加到sprite上。每次要移动卡牌的时候，只需要操作sprite就好了，其内的文本类后者矢量绘图类都会随之移动。
   值得一提的是，如果是创建一个类继承自egret.Sprite，并且这个类有点击等监听事件，如果无法触发，请设置其touchEnable属性变为true;如果有些地方触发有效果有些地方无效果，就要创建一个同等大小的shape，并且将其的alpha设置为0，放置在sprite上即可。

/**
 * 创建带有矢量绘制功能的显示容器sprite
 *
 * @param {number} width 显示容器的宽
 * @param {number} height 显示容器的高
 * @param {number} [x=0] 显示容器的x坐标
 * @param {number} [y=0] 显示容器的y坐标
 * @returns {egret.Sprite} 返回显示容器对象
 */
function createSprite(width: number, height: number, x: number = 0, y: number = 0): egret.Sprite {
    const resource: egret.Sprite = new egret.Sprite();
    resource.width = width;
    resource.height = height;
    resource.x = x;
    resource.y = y;
    return resource;
}

1. 创建矢量图Shape
   我在最开始使用的时候，将x跟y直接用在drawRect中，但是通过egret wing自带的调试工具调试后发现，他的实际位置显示的有问题。所以现在在使用drawRect的时候，将x跟y都设置为0，再通过刚刚传入的x跟y坐标设置这个矢量图对象的位置。
   这个只是创建矩形、还有很多如圆弧、圆形等可以参照这个自行封装。

/**
 * 创建矢量图Shape
 *
 * @param {number} width 矢量图的宽
 * @param {number} height 矢量图的高
 * @param {number} color 矢量图的颜色
 * @param {number} [x=0] 矢量图的x坐标
 * @param {number} [y=0] 矢量图的y坐标
 * @param {number} [alpha=1] 矢量图的透明度
 * @returns {egret.Shape} 返回矢量图对象
 */
function createShape(width: number, height: number, color: number, x: number = 0, y: number = 0, alpha: number = 1): egret.Shape {
    const resource: egret.Shape = new egret.Shape();
    resource.graphics.beginFill(color, alpha);
    resource.graphics.drawRect(0, 0, width, height);
    resource.graphics.endFill();
    resource.x = x;
    resource.y = y;
    return resource;
}

另附一个自己封装的环形图代码：
这个实现了传入一个sprite对象以及固定格式的数据，将环形图及图例添加到传入对象的特定方法。

/**
     * 画饼图
     * obj，在哪个对象上绘制
     * data，饼图数据，格式固定
     *
     * @export
     * @param {any} obj
     * @param {any} data
     */
    export function drawCircle(obj, data) {
        const objWidth: number = obj.width;
        const objHeight: number = obj.height;
        const width: number = obj.width * 0.8; //新创建的背景的宽度,宽高相同
        const height: number = obj.height * 0.8; //新创建的背景的高度
        const lineHeight: number = 35;
        const length: number = data.length; //数据长度
        let startDeg = 0; //扇形起始角度
        let endDeg = 0; //结束角度

        let percentBg: egret.Sprite = new egret.Sprite();
        percentBg.width = width;
        percentBg.height = height;
        percentBg.x = (objWidth - width) / 2;
        percentBg.y = 95;
        obj.addChild(percentBg);
        let percentTotalBg: egret.Sprite = new egret.Sprite();
        percentTotalBg.width = width;
        let circleBg: egret.Sprite = new egret.Sprite();
        percentTotalBg.addChild(circleBg);
        circleBg.width = width;
        circleBg.height = width;
        circleBg.y = 0;

        for (let i = 0; i < length; i++) { //环形图浅色部分
            endDeg = (data[i].industryPercent).toFixed(2) * 3.6 + startDeg;
            circleBg.graphics.beginFill(GameConfig.lightColor[i]);
            circleBg.graphics.moveTo(width / 2, width / 2);
            circleBg.graphics.lineTo(width, width / 2);
            circleBg.graphics.drawArc(width / 2, width / 2, width / 2.3, (startDeg + 2) * Math.PI / 180, endDeg * Math.PI / 180);
            circleBg.graphics.lineTo(width / 2, width / 2);
            circleBg.graphics.endFill();
            startDeg = endDeg;
        }
        for (let i = 0; i < length; i++) { //环形图深色部分
            endDeg = (data[i].industryPercent).toFixed(2) * 3.6 + startDeg;
            circleBg.graphics.beginFill(GameConfig.darkColor[i]);
            circleBg.graphics.moveTo(width / 2, width / 2);
            circleBg.graphics.lineTo(width, width / 2);
            circleBg.graphics.drawArc(width / 2, width / 2, width / 2.6, (startDeg + 2) * Math.PI / 180, endDeg * Math.PI / 180);
            circleBg.graphics.lineTo(width / 2, width / 2);
            circleBg.graphics.endFill();
            startDeg = endDeg;
        }
        circleBg.graphics.beginFill(GameConfig.TextColors.white); //环形图中间白色部分
        circleBg.graphics.moveTo(width / 2, width / 2);
        circleBg.graphics.lineTo(width, width / 2);
        circleBg.graphics.drawArc(width / 2, width / 2, width / 3.5, 0, 360 * Math.PI / 180);
        circleBg.graphics.lineTo(width / 2, width / 2);
        circleBg.graphics.endFill();

        let centerIcon = ZpyGameUtils.createBitmapByName("card_dark_icon_png"); //中心icon
        centerIcon.x = width / 2 - centerIcon.width / 2 * 0.6;
        centerIcon.y = width / 2 - centerIcon.height / 2 * 0.6;
        centerIcon.scaleX = 0.6;
        centerIcon.scaleY = 0.6;
        circleBg.addChild(centerIcon);
        percentTotalBg.addChild(circleBg);

        let labelBg: egret.Sprite = new egret.Sprite();
        labelBg.width = width - 40;
        labelBg.x = 20;
        labelBg.y = width;
        for (let i = 0, len = data.length; i < len; i++) {
            let icon: egret.Shape = new egret.Shape();
            icon.graphics.beginFill(GameConfig.darkColor[i]);
            icon.graphics.drawRect(0, i * lineHeight, 20, 20);
            icon.graphics.endFill();
            labelBg.addChild(icon);

            let label: egret.TextField = ZpyGameUtils.createText(data[i].industryName + '  ' + (data[i].industryPercent).toFixed(2) + '%', GameConfig.TextColors.black, 20);
            label.x = 30;
            label.y = lineHeight * i;
            labelBg.addChild(label);
        }
        percentTotalBg.addChild(labelBg);
        percentTotalBg.height = width + length * lineHeight;

        var scrollView: egret.ScrollView = new egret.ScrollView();
        scrollView.setContent(percentTotalBg);
        scrollView.width = width;
        scrollView.height = height;
        percentBg.addChild(scrollView);
    }