Show:

File: libs/CanvasRender.js

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        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 extendStatics(d, b);
    };
    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) {
    /**
     * Canvas 渲染器
     * @class annie.CanvasRender
     * @extends annie.AObject
     * @implements IRender
     * @public
     * @since 1.0.0
     */
    var CanvasRender = /** @class */ (function (_super) {
        __extends(CanvasRender, _super);
        /**
         * @method CanvasRender
         * @param {annie.Stage} stage
         * @public
         * @since 1.0.0
         */
        function CanvasRender(stage) {
            var _this = _super.call(this) || this;
            /**
             * 渲染器所在最上层的对象
             * @property rootContainer
             * @public
             * @since 1.0.0
             * @type {any}
             * @default null
             */
            _this.rootContainer = null;
            /**
             * @property viewPort
             *
             */
            _this.viewPort = new annie.Rectangle();
            _this._blendMode = 0;
            _this._instanceType = "annie.CanvasRender";
            _this._stage = stage;
            return _this;
        }
        /**
         * 开始渲染时执行
         * @method begin
         * @since 1.0.0
         * @public
         */
        CanvasRender.prototype.begin = function (color) {
            var s = this, c = s.rootContainer, ctx = s._ctx;
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            if (color == "") {
                ctx.clearRect(0, 0, c.width, c.height);
            }
            else {
                ctx.fillStyle = color;
                ctx.fillRect(0, 0, c.width, c.height);
            }
        };
        /**
         * 开始有遮罩时调用
         * @method beginMask
         * @param {annie.DisplayObject} target
         * @public
         * @since 1.0.0
         */
        CanvasRender.prototype.beginMask = function (target) {
            var s = this, ctx = s._ctx;
            ctx.save();
            ctx.globalAlpha = 0;
            ctx.beginPath();
            s.drawMask(target);
            ctx.closePath();
            ctx.clip();
        };
        CanvasRender.prototype.drawMask = function (target) {
            var s = this, tm = target._cMatrix, ctx = s._ctx;
            ctx.setTransform(tm.a, tm.b, tm.c, tm.d, tm.tx, tm.ty);
            if (target._instanceType == "annie.Shape") {
                target._draw(ctx, true);
            }
            else if (target._instanceType == "annie.Sprite" || target._instanceType == "annie.MovieClip") {
                for (var i = 0; i < target.children.length; i++) {
                    s.drawMask(target.children[i]);
                }
            }
            else {
                var bounds = target._bounds;
                ctx.rect(0, 0, bounds.width, bounds.height);
            }
        };
        /**
         * 结束遮罩时调用
         * @method endMask
         * @public
         * @since 1.0.0
         */
        CanvasRender.prototype.endMask = function () {
            this._ctx.restore();
        };
        /**
         * 调用渲染
         * @public
         * @since 1.0.0
         * @method draw
         * @param {annie.DisplayObject} target 显示对象
         */
        CanvasRender.prototype.draw = function (target) {
            var s = this;
            var texture = target._texture;
            if (!texture || texture.width == 0 || texture.height == 0)
                return;
            var ctx = s._ctx, tm;
            tm = target._cMatrix;
            if (ctx.globalAlpha != target._cAlpha) {
                ctx.globalAlpha = target._cAlpha;
            }
            if (s._blendMode != target.blendMode) {
                ctx.globalCompositeOperation = annie.BlendMode.getBlendMode(target.blendMode);
                s._blendMode = target.blendMode;
            }
            ctx.setTransform(tm.a, tm.b, tm.c, tm.d, tm.tx, tm.ty);
            if (target._offsetX != 0 || target._offsetY != 0) {
                ctx.translate(target._offsetX, target._offsetY);
            }
            var sbl = target._splitBoundsList;
            var rect = null;
            var bounds = target._bounds;
            var startX = 0 - bounds.x;
            var startY = 0 - bounds.y;
            for (var i = 0; i < sbl.length; i++) {
                if (sbl[i].isDraw === true) {
                    rect = sbl[i].rect;
                    ctx.drawImage(texture, rect.x + startX, rect.y + startY, rect.width, rect.height, rect.x + startX, rect.y + startY, rect.width, rect.height);
                }
            }
            //getBounds
            /*let rect1=target.getBounds();
            rect=new annie.Rectangle(rect1.x-target._offsetX,rect1.y-target._offsetY,rect1.width,rect1.height);
            s._ctx.beginPath();
            s._ctx.lineWidth=4;
            s._ctx.strokeStyle="#ff0000";
            s._ctx.moveTo(rect.x,rect.y);
            s._ctx.lineTo(rect.x+rect.width,rect.y);
            s._ctx.lineTo(rect.x+rect.width,rect.y+rect.height);
            s._ctx.lineTo(rect.x,rect.y+rect.height);
            s._ctx.closePath();
            s._ctx.stroke();

            //getDrawRect
            s._ctx.setTransform(1, 0, 0, 1, 0, 0);
            target.getDrawRect(target._cMatrix);
            rect1=DisplayObject._transformRect;
            rect=new annie.Rectangle(rect1.x-target._offsetX,rect1.y-target._offsetY,rect1.width,rect1.height);
            s._ctx.beginPath();
            s._ctx.lineWidth=2;
            s._ctx.strokeStyle="#00ff00";
            s._ctx.moveTo(rect.x,rect.y);
            s._ctx.lineTo(rect.x+rect.width,rect.y);
            s._ctx.lineTo(rect.x+rect.width,rect.y+rect.height);
            s._ctx.lineTo(rect.x,rect.y+rect.height);
            s._ctx.closePath();
            s._ctx.stroke();
            //*/
        };
        CanvasRender.prototype.end = function () {
        };
        ;
        /**
         * 初始化渲染器
         * @public
         * @since 1.0.0
         * @method init
         */
        CanvasRender.prototype.init = function (canvas) {
            var s = this;
            s.rootContainer = canvas;
            s._stage.rootDiv.appendChild(s.rootContainer);
            s.rootContainer.id = "_a2x_canvas";
            s._ctx = canvas.getContext('2d');
        };
        /**
         * 当尺寸改变时调用
         * @public
         * @since 1.0.0
         * @method reSize
         */
        CanvasRender.prototype.reSize = function (width, height) {
            var s = this, c = s.rootContainer;
            c.width = width;
            c.height = height;
            s.viewPort.width = c.width;
            s.viewPort.height = c.height;
            c.style.width = Math.ceil(width / annie.devicePixelRatio) + "px";
            c.style.height = Math.ceil(height / annie.devicePixelRatio) + "px";
        };
        CanvasRender.prototype.destroy = function () {
            var s = this;
            s.rootContainer = null;
            s._stage = null;
            s._ctx = null;
        };
        return CanvasRender;
    }(annie.AObject));
    annie.CanvasRender = CanvasRender;
})(annie || (annie = {}));