EaselJS的九宫格缩放图片

要做预加载，得显示一个进度条，进度条需要拉伸不变形，于是去搜了一下有没有类似flash影片剪辑里面“九宫格切片”的功能。

确实找到了，地址如下：

https://github.com/CreateJS/EaselJS/tree/6abc90f5c32a29e90666fc2c7dcde5d8b6c8a34f/extras/ScaleBitmap

但是有两个问题

1、只缩放宽/高的时候，显示有BUG

2、从基友那里拿到的图片素材是spriteSheet打包出来的，这个类只支持整张位图的切片，像这样：

所以要修改一下原来的代码

构造函数的地方：

        this.snapToPixel = true;
        //这里加入sourceRect属性
        this.sourceRect = new createjs.Rectangle(0,0,this.image.width,this.image.height);

重写draw()：

p.draw = function(ctx, ignoreCache) {
        if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; }

        var centerX = this.scale9Grid.width;
        var centerY = this.scale9Grid.height;
        if(centerX == 0) //vertical
        {
            if(centerY == 0)
            {
                throw "One of scale9Grid width or height must be greater than zero.";
            }
            var imageWidth = this.sourceRect.width;
            var scale3Region1 = this.sourceRect.y + this.scale9Grid.y;
            var scale3Region3 = this.sourceRect.y + this.scale9Grid.y + this.scale9Grid.height;
            var scaledFirstRegion = this.scale9Grid.y;
            var scaledThirdRegion = this.sourceRect.height - this.scale9Grid.y - this.scale9Grid.height;
            var scaledSecondRegion = this.drawHeight - scaledFirstRegion - scaledThirdRegion;

            ctx.drawImage(this.image, this.sourceRect.x, this.sourceRect.y, imageWidth, scaledFirstRegion, 0, 0, this.drawWidth, scaledFirstRegion);
            ctx.drawImage(this.image, this.sourceRect.x, scale3Region1, imageWidth, centerY, 0, scaledFirstRegion, this.drawWidth, scaledSecondRegion);
            ctx.drawImage(this.image, this.sourceRect.x, scale3Region3 + centerY, imageWidth, scaledThirdRegion, 0, scaledFirstRegion + scaledSecondRegion, this.drawWidth, scaledThirdRegion);
        }
        else if(centerY == 0) //horizontal
        {
            var imageHeight = this.sourceRect.height;
            scale3Region1 = this.sourceRect.x + this.scale9Grid.x;
            scale3Region3 = this.sourceRect.x + this.scale9Grid.x + this.scale9Grid.width;
            scaledFirstRegion = this.scale9Grid.x;
            scaledThirdRegion = this.sourceRect.width - this.scale9Grid.x - this.scale9Grid.width;
            scaledSecondRegion = this.drawWidth - scaledFirstRegion - scaledThirdRegion;


            ctx.drawImage(this.image, this.sourceRect.x, this.sourceRect.y, scaledFirstRegion, imageHeight, 0, 0, scaledFirstRegion, this.drawHeight);
            ctx.drawImage(this.image, scale3Region1, this.sourceRect.y, centerX, imageHeight, scaledFirstRegion, 0, scaledSecondRegion, this.drawHeight);
            ctx.drawImage(this.image, scale3Region3, this.sourceRect.y, scaledThirdRegion, imageHeight, scaledFirstRegion + scaledSecondRegion, 0, scaledThirdRegion, this.drawHeight);
        }
        else
        {
            var left = this.scale9Grid.x;
            var top = this.scale9Grid.y;
            var right = this.sourceRect.width - centerX - left;
            var bottom = this.sourceRect.height - centerY - top;
            var scaledCenterX = this.drawWidth - left - right;
            var scaledCenterY = this.drawHeight - top - bottom;

            ctx.drawImage(this.image, this.sourceRect.x, this.sourceRect.y, left, top, 0, 0, left, top);
            ctx.drawImage(this.image, this.sourceRect.x + left, this.sourceRect.y, centerX, top, left, 0, scaledCenterX, top);
            ctx.drawImage(this.image, this.sourceRect.x + left + centerX, this.sourceRect.y, right, top, left + scaledCenterX, 0, right, top);

            ctx.drawImage(this.image, this.sourceRect.x, this.sourceRect.y + top, left, centerY, 0, top, left, scaledCenterY);
            ctx.drawImage(this.image, this.sourceRect.x + left, this.sourceRect.y + top, centerX, centerY, left, top, scaledCenterX, scaledCenterY);
            ctx.drawImage(this.image, this.sourceRect.x + left + centerX, this.sourceRect.y + top, right, centerY, left + scaledCenterX, top, right, scaledCenterY);

            ctx.drawImage(this.image, this.sourceRect.x, this.sourceRect.y + top + centerY, left, bottom, 0, top + scaledCenterY, left, bottom);
            ctx.drawImage(this.image, this.sourceRect.x + left, this.sourceRect.y + top + centerY, centerX, bottom, left, top + scaledCenterY, scaledCenterX, bottom);
            ctx.drawImage(this.image, this.sourceRect.x + left + centerX, this.sourceRect.y + top + centerY, right, bottom, left + scaledCenterX, top + scaledCenterY, right, bottom);
        }

修改过之后的使用方法和元网站提供的一样：

var sb = new createjs.ScaleBitmap(imagePathOrSrc, new createjs.Rectangle(10,10,80,80));
sb.sourceRect = new createjs.Rectangle(x,y,w,h);//这里加入了对sourceRect 的支持
sb.setDrawSize(scaledWidth,scaledHeight);
stage.addChild(sb);

完了之后就可以对spriteSheet整合的图片进行九宫格缩放了