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 annieUI
 */
var annieUI;
(function (annieUI) {
    /**
     * <h4><font color="red">小游戏不支持 小程序不支持</font></h4>
     * 画板类
     * @class annieUI.DrawingBoard
     * @public
     * @extends annie.Bitmap
     * @since 1.1.1
     */
    var DrawingBoard = (function (_super) {
        __extends(DrawingBoard, _super);
        /**
         * 构造函数
         * @method DrawingBoard
         * @param width 画板宽
         * @param height 画板高
         * @param bgColor 背景色 默认透明
         * @since 1.1.1
         */
        function DrawingBoard(width, height, bgColor) {
            if (bgColor === void 0) { bgColor = ""; }
            _super.call(this, DrawingBoard._getDrawCanvas(width, height));
            this.context = null;
            this._isMouseDown = false;
            this._drawRadius = 50;
            /**
             * 绘画颜色, 可以是任何的颜色类型
             * @property drawColor
             * @type {string}
             * @public
             * @since
             * @type {any}
             */
            this.drawColor = "#ffffff";
            /**
             * 背景色 可以是任何的颜色类型
             * @property bgColor
             * @type {any}
             * @public
             * @since 1.1.1
             */
            this.bgColor = "";
            /**
             * 总步数数据
             * @property totalStepList
             * @protected
             * @type {any[]}
             */
            this.totalStepList = [];
            /**
             * 当前步数所在的id
             * @property currentStepId
             * @protected
             * @type {number}
             */
            this.currentStepId = 0;
            var s = this;
            s._instanceType = "annieUI.DrawingBoard";
            s.context = s._texture.getContext('2d');
            s.context.lineCap = "round";
            s.context.lineJoin = "round";
            s.reset(bgColor);
            var mouseDown = s.onMouseDown.bind(s);
            var mouseMove = s.onMouseMove.bind(s);
            var mouseUp = s.onMouseUp.bind(s);
            s.addEventListener(annie.MouseEvent.MOUSE_DOWN, mouseDown);
            s.addEventListener(annie.MouseEvent.MOUSE_MOVE, mouseMove);
            s.addEventListener(annie.MouseEvent.MOUSE_UP, mouseUp);
        }
        Object.defineProperty(DrawingBoard.prototype, "drawRadius", {
            /**
             * 绘画半径
             * @property drawRadius
             * @type {number}
             * @public
             * @since 1.1.1
             */
            get: function () {
                return this._drawRadius;
            },
            set: function (value) {
                this._drawRadius = value;
            },
            enumerable: true,
            configurable: true
        });
        ;
        DrawingBoard._getDrawCanvas = function (width, height) {
            var canvas = document.createElement("canvas");
            canvas.width = width;
            canvas.height = height;
            return canvas;
        };
        DrawingBoard.prototype.onMouseDown = function (e) {
            var s = this;
            s._isMouseDown = true;
            var ctx = s.context;
            ctx.beginPath();
            ctx.strokeStyle = s.drawColor;
            ctx.lineWidth = s._drawRadius;
            var lx = e.localX >> 0;
            var ly = e.localY >> 0;
            ctx.moveTo(lx, ly);
            s.addStepObj = {};
            s.addStepObj.c = s.drawColor;
            s.addStepObj.r = s._drawRadius;
            s.addStepObj.sx = lx;
            s.addStepObj.sy = ly;
            s.addStepObj.ps = [];
        };
        ;
        DrawingBoard.prototype.onMouseUp = function (e) {
            var s = this;
            if (s._isMouseDown) {
                s._isMouseDown = false;
                if (s.addStepObj.ps && s.addStepObj.ps.length > 0) {
                    s.currentStepId++;
                    s.totalStepList.push(s.addStepObj);
                }
            }
        };
        ;
        DrawingBoard.prototype.onMouseMove = function (e) {
            var s = this;
            if (s._isMouseDown) {
                if (s.addStepObj) {
                    var ctx = s.context;
                    var lx = e.localX >> 0;
                    var ly = e.localY >> 0;
                    ctx.lineTo(lx, ly);
                    ctx.stroke();
                    s.addStepObj.ps.push(lx, ly);
                }
                else {
                    s.onMouseDown(e);
                }
            }
        };
        ;
        /**
         * 重置画板
         * @method reset
         * @param bgColor
         * @public
         * @since 1.1.1
         */
        DrawingBoard.prototype.reset = function (bgColor) {
            if (bgColor === void 0) { bgColor = ""; }
            var s = this;
            if (bgColor != "") {
                s.bgColor = bgColor;
            }
            if (s.bgColor != "") {
                s.context.fillStyle = s.bgColor;
            }
            else {
                s.context.fillStyle = "#00000000";
            }
            s.context.clearRect(0, 0, s.bitmapData.width, s.bitmapData.height);
            s.context.fillRect(0, 0, s._bitmapData.width, s._bitmapData.height);
            s.currentStepId = 0;
            s.totalStepList = [];
            s.addStepObj = null;
            s._isMouseDown = false;
        };
        /**
         * 撤销步骤
         * @method cancel
         * @param {number} step 撤销几步 0则全部撤销,等同于reset
         * @public
         * @since 1.1.1
         */
        DrawingBoard.prototype.cancel = function (step) {
            if (step === void 0) { step = 0; }
            var s = this;
            if (step == 0) {
                s.reset();
            }
            else {
                if (s.currentStepId - step >= 0) {
                    s.currentStepId -= step;
                    s.totalStepList.splice(s.currentStepId, step);
                    if (s.bgColor != "") {
                        s.context.fillStyle = s.bgColor;
                    }
                    else {
                        s.context.fillStyle = "#00000000";
                    }
                    s.context.clearRect(0, 0, s.bitmapData.width, s.bitmapData.height);
                    s.context.fillRect(0, 0, s.bitmapData.width, s.bitmapData.height);
                    var len = s.totalStepList.length;
                    for (var i = 0; i < len; i++) {
                        var ctx = s.context;
                        ctx.beginPath();
                        ctx.strokeStyle = s.totalStepList[i].c;
                        ctx.lineWidth = s.totalStepList[i].r;
                        ctx.moveTo(s.totalStepList[i].sx, s.totalStepList[i].sy);
                        var ps = s.totalStepList[i].ps;
                        var pLen = ps.length;
                        for (var m = 0; m < pLen; m += 2) {
                            ctx.lineTo(ps[m], ps[m + 1]);
                            ctx.stroke();
                        }
                    }
                }
                else {
                    return false;
                }
            }
            return true;
        };
        DrawingBoard.prototype.destroy = function () {
            var s = this;
            s.context = null;
            s.totalStepList = null;
            s.drawColor = null;
            s.bgColor = null;
            s.addStepObj = null;
            _super.prototype.destroy.call(this);
        };
        return DrawingBoard;
    }(annie.Bitmap));
    annieUI.DrawingBoard = DrawingBoard;
})(annieUI || (annieUI = {}));

    
Top