Show:

File: libs/bitmap.js

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
 * @module annie
 */
var annie;
(function (annie) {
    /**
     * 利用 Bitmap() 构造函数,可以创建包含对 BitmapData 对象的引用的 Bitmap 对象。
     * 创建了 Bitmap 对象后,使用父 Sprite 实例的 addChild() 或 addChildAt() 方法将位图放在显示列表中。
     * @class annie.Bitmap
     * @public
     * @extends annie.DisplayObject
     * @since 1.0.0
     */
    var Bitmap = (function (_super) {
        __extends(Bitmap, _super);
        /**
         * 构造函数
         * @method Bitmap
         * @since 1.0.0
         * @public
         * @param {Image|Video|other} bitmapData 一个HTMl Image的实例,小程序或者小游戏里则只能是一个图片的地址
         * @param {annie.Rectangle} rect 设置显示Image的区域,不设置值则全部显示Image的内容,小程序或者小游戏里没有这个参数
         * @example
         *      //html5
         *      var imgEle=new Image();
         *      imgEle.onload=function (e) {
         *          var bitmap = new annie.Bitmap(imgEle)
         *          //居中对齐
         *          bitmap.x = (s.stage.desWidth - bitmap.width) / 2;
         *          bitmap.y = (s.stage.desHeight - bitmap.height) / 2;
         *          s.addChild(bitmap);
         *          //截取图片的某一部分显示
         *          var rect = new annie.Rectangle(0, 0, 200, 200),
         *          rectBitmap = new annie.Bitmap(imgEle, rect);
         *          rectBitmap.x = (s.stage.desWidth - bitmap.width) / 2;
         *          rectBitmap.y = 100;
         *          s.addChild(rectBitmap);
         *      }
         *      imgEle.src='http://test.annie2x.com/test.jpg';
         *      //小程序或者小游戏
         *      var imgEle="http://test.annie2x.com/test.jpg";
         *      var bitmap=new annie.Bitmap(imgEle);
         *      s.addChild(bitmap);
         *
         * <p><a href="http://test.annie2x.com/annie/Bitmap/index.html" target="_blank">测试链接</a></p>
         */
        function Bitmap(bitmapData, rect) {
            if (bitmapData === void 0) { bitmapData = null; }
            if (rect === void 0) { rect = null; }
            _super.call(this);
            this._bitmapData = null;
            this._realCacheImg = null;
            this._rect = null;
            this._isCache = false;
            /**
             * <h4><font color="red">小游戏不支持 小程序不支持</font></h4>
             * 是否对图片对象使用像素碰撞检测透明度,默认关闭
             * @property hitTestWidthPixel
             * @type {boolean}
             * @default false
             * @since 1.1.0
             */
            this.hitTestWidthPixel = false;
            var s = this;
            s._instanceType = "annie.Bitmap";
            s._rect = rect;
            s.bitmapData = bitmapData;
        }
        Object.defineProperty(Bitmap.prototype, "rect", {
            /**
             * <h4><font color="red">小游戏不支持 小程序不支持</font></h4>
             * 有时候一张贴图,我们只需要显示他的部分。其他不显示,对你可能猜到了
             * SpriteSheet就用到了这个属性。默认为null表示全尺寸显示bitmapData需要显示的范围
             * @property rect
             * @public
             * @since 1.0.0
             * @type {annie.Rectangle}
             * @default null
             */
            get: function () {
                return this._rect;
            },
            set: function (value) {
                var s = this;
                s._rect = value;
                s._UI.UD = true;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(Bitmap.prototype, "bitmapData", {
            /**
             * <h4><font color="red">小游戏不支持 小程序不支持</font></h4>
             * HTML的一个Image对象或者是canvas对象或者是video对象
             * @property bitmapData
             * @public
             * @since 1.0.0
             * @type {any}
             * @default null
             */
            get: function () {
                return this._bitmapData;
            },
            set: function (value) {
                var s = this;
                s._setProperty("_bitmapData", value, 3);
                if (!value) {
                    s._bounds.width = s._bounds.height = 0;
                }
                else {
                    s._bounds.width = s._rect ? s._rect.width : value.width;
                    s._bounds.height = s._rect ? s._rect.height : value.height;
                }
            },
            enumerable: true,
            configurable: true
        });
        ;
        Bitmap.prototype.updateMatrix = function () {
            var s = this;
            _super.prototype.updateMatrix.call(this);
            //滤镜
            var bitmapData = s._bitmapData;
            if ((s._UI.UD || s._UI.UF) && bitmapData) {
                if (bitmapData.width == 0 || bitmapData.height == 0)
                    return;
                s._UI.UD = false;
                if (s.cFilters.length > 0) {
                    if (!s._realCacheImg) {
                        s._realCacheImg = window.document.createElement("canvas");
                    }
                    var _canvas = s._realCacheImg;
                    var tr = s._rect;
                    var w = tr ? tr.width : bitmapData.width;
                    var h = tr ? tr.height : bitmapData.height;
                    var newW = w + 20;
                    var newH = h + 20;
                    _canvas.width = newW;
                    _canvas.height = newH;
                    var ctx = _canvas.getContext("2d");
                    ctx.clearRect(0, 0, newW, newH);
                    ctx.translate(10, 10);
                    ctx.shadowBlur = 0;
                    ctx.shadowColor = "#0";
                    ctx.shadowOffsetX = 0;
                    ctx.shadowOffsetY = 0;
                    ////////////////////
                    if (tr) {
                        ctx.drawImage(s._bitmapData, tr.x, tr.y, w, h, 0, 0, w, h);
                    }
                    else {
                        ctx.drawImage(s._bitmapData, 0, 0);
                    }
                    /////////////////////
                    var cf = s.cFilters;
                    var cfLen = cf.length;
                    if (cfLen > 0) {
                        var imageData = ctx.getImageData(0, 0, newW, newH);
                        for (var i = 0; i < cfLen; i++) {
                            cf[i].drawFilter(imageData);
                        }
                        ctx.putImageData(imageData, 0, 0);
                    }
                    //s._realCacheImg.src = _canvas.toDataURL("image/png");
                    s._texture = s._realCacheImg;
                    s._offsetX = -10;
                    s._offsetY = -10;
                    s._isCache = true;
                }
                else {
                    s._isCache = false;
                    s._offsetX = 0;
                    s._offsetY = 0;
                    s._texture = bitmapData;
                }
                var bw = void 0;
                var bh = void 0;
                if (s._rect) {
                    bw = s._rect.width;
                    bh = s._rect.height;
                }
                else {
                    bw = s._texture.width + s._offsetX * 2;
                    bh = s._texture.height + s._offsetY * 2;
                }
                s._bounds.width = bw;
                s._bounds.height = bh;
            }
            s._UI.UF = false;
            s._UI.UM = false;
            s._UI.UA = false;
        };
        /**
         * <h4><font color="red">小游戏不支持 小程序不支持</font></h4>
         * 从SpriteSheet的大图中剥离出单独的小图以供特殊用途
         * @method convertToImage
         * @static
         * @public
         * @since 1.0.0
         * @param {annie.Bitmap} bitmap
         * @param {boolean} isNeedImage 是否一定要返回img,如果不为true则有时返回的是canvas
         * @return {Canvas|BitmapData}
         * @example
         *      var spriteSheetImg = new Image(),
         *      rect = new annie.Rectangle(0, 0, 200, 200),
         *      yourBitmap = new annie.Bitmap(spriteSheetImg, rect);
         *      spriteSheetImg.onload=function(e){
         *          var singleSmallImg = annie.Bitmap.convertToImage(yourBitmap);//convertToImage是annie.Bitmap的一个静态方法
         *          console.log(singleSmallImg);
         *      }
         *      spriteSheetImg.src = 'http://test.annie2x.com/test.jpg';
         */
        Bitmap.convertToImage = function (bitmap, isNeedImage) {
            if (isNeedImage === void 0) { isNeedImage = true; }
            if (!bitmap._rect) {
                return bitmap.bitmapData;
            }
            else {
                var _canvas = window.document.createElement("canvas");
                var w = bitmap._rect.width;
                var h = bitmap._rect.height;
                _canvas.width = w;
                _canvas.height = h;
                // _canvas.style.width = w / devicePixelRatio + "px";
                // _canvas.style.height = h / devicePixelRatio + "px";
                var ctx = _canvas.getContext("2d");
                var tr = bitmap._rect;
                ctx.drawImage(bitmap.bitmapData, tr.x, tr.y, w, h, 0, 0, w, h);
                if (isNeedImage) {
                    var img = new Image();
                    img.src = _canvas.toDataURL();
                    return img;
                }
                else {
                    return _canvas;
                }
            }
        };
        Bitmap.prototype.hitTestPoint = function (hitPoint, isGlobalPoint, isMustMouseEnable) {
            if (isGlobalPoint === void 0) { isGlobalPoint = false; }
            if (isMustMouseEnable === void 0) { isMustMouseEnable = false; }
            var s = this;
            var obj = _super.prototype.hitTestPoint.call(this, hitPoint, isGlobalPoint, isMustMouseEnable);
            if (obj) {
                if (s.hitTestWidthPixel) {
                    var p = void 0;
                    if (isGlobalPoint) {
                        p = s.globalToLocal(hitPoint);
                    }
                    else {
                        p = hitPoint;
                    }
                    p.x += s._offsetX;
                    p.y += s._offsetY;
                    var image = s._texture;
                    if (!image || image.width == 0 || image.height == 0) {
                        return null;
                    }
                    var _canvas = annie.DisplayObject["_canvas"];
                    _canvas.width = 1;
                    _canvas.height = 1;
                    var ctx = _canvas["getContext"]('2d');
                    ctx.clearRect(0, 0, 1, 1);
                    if (s._rect) {
                        p.x += s._rect.x;
                        p.y += s._rect.y;
                    }
                    ctx.setTransform(1, 0, 0, 1, -p.x, -p.y);
                    ctx.drawImage(image, 0, 0);
                    if (ctx.getImageData(0, 0, 1, 1).data[3] > 0) {
                        return s;
                    }
                }
                else {
                    return s;
                }
            }
            return null;
        };
        Bitmap.prototype.destroy = function () {
            //清除相应的数据引用
            var s = this;
            s._bitmapData = null;
            s._realCacheImg = null;
            s._rect = null;
            _super.prototype.destroy.call(this);
        };
        return Bitmap;
    }(annie.DisplayObject));
    annie.Bitmap = Bitmap;
})(annie || (annie = {}));