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 = {}));