var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
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() 方法将位图放在显示列表中。
* 一个 Bitmap 对象可在若干 Bitmap 对象之中共享其 BitmapData 引用,
* 与转换属性或旋转属性无关。由于能够创建引用相同 BitmapData 对象的多个 Bitmap 对象,
* 因此,多个显示对象可以使用相同的复杂 BitmapData 对象,而不会因为每个显示对象实例使用一个 BitmapData 对象而产生内存开销。
* @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
* 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/biglong/logo.jpg';
*
* <p><a href="http://test.annie2x.com/biglong/apiDemo/annieBitmap/index.html" target="_blank">测试链接</a></p>
*/
function Bitmap(bitmapData, rect) {
if (bitmapData === void 0) { bitmapData = null; }
if (rect === void 0) { rect = null; }
var _this = _super.call(this) || this;
_this._bitmapData = null;
_this._realCacheImg = null;
/**
* 有时候一张贴图图,我们只需要显示他的部分。其他不显示,对你可能猜到了
* SpriteSheet就用到了这个属性。默认为null表示全尺寸显示bitmapData需要显示的范围
* @property rect
* @public
* @since 1.0.0
* @type {annie.Rectangle}
* @default null
*/
_this.rect = null;
/**
* @property _isCache
* @private
* @since 1.0.0
* @type {boolean}
* @default false
*/
_this._isCache = false;
/**
* 是否对矢量使用像素碰撞 默认开启
* @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;
return _this;
}
Object.defineProperty(Bitmap.prototype, "bitmapData", {
/**
* 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
});
;
/**
* 重写刷新
* @method update
* @public
* @param isDrawUpdate 不是因为渲染目的而调用的更新,比如有些时候的强制刷新 默认为true
* @since 1.0.0
*/
Bitmap.prototype.update = function (isDrawUpdate) {
if (isDrawUpdate === void 0) { isDrawUpdate = false; }
var s = this;
if (!s._visible)
return;
_super.prototype.update.call(this, isDrawUpdate);
//滤镜
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;
//给webgl更新新
// s._texture.updateTexture = true;
}
s._UI.UF = false;
s._UI.UM = false;
s._UI.UA = false;
};
/**
* 从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的一个静态方法
* trace(singleSmallImg);
* }
* spriteSheetImg.src = 'http://test.annie2x.com/biglong/apiDemo/annieBitmap/resource/sheet.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;
}
}
};
/**
* 重写hitTestPoint
* @method hitTestPoint
* @param {annie.Point} globalPoint
* @param {boolean} isMouseEvent
* @returns {any}
* @public
* @since 1.0.0
*/
Bitmap.prototype.hitTestPoint = function (globalPoint, isMouseEvent) {
if (isMouseEvent === void 0) { isMouseEvent = false; }
var s = this;
if (isMouseEvent && !s.mouseEnable)
return null;
var p = s.globalToLocal(globalPoint);
p.x += s._offsetX;
p.y += s._offsetY;
if (s.getBounds().isPointIn(p)) {
if (s.hitTestWidthPixel) {
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;
};
return Bitmap;
}(annie.DisplayObject));
annie.Bitmap = Bitmap;
})(annie || (annie = {}));