Jony/assets/js/joe.sketchpad.js

1 line
5.2 KiB
JavaScript
Raw Normal View History

2021-01-26 06:19:52 +00:00
function Sketchpad(t){for(var e in this.constructor.prototype)this[e]=this[e].bind(this);t.hasOwnProperty("element")?("string"==typeof t.element?this.element=$(t.element):this.element=t.element,this._width=t.width||this.element.attr("data-width")||0,this._height=t.height||this.element.attr("data-height")||0,this.color=t.color||this.element.attr("data-color")||"#000000",this.penSize=t.penSize||this.element.attr("data-penSize")||5,this.readOnly=t.readOnly||this.element.attr("data-readOnly")||!1,this.readOnly||this.element.css({cursor:"crosshair"}),this.strokes=t.strokes||[],this._currentStroke={color:null,size:null,lines:[]},this.undoHistory=t.undoHistory||[],this.animateIds=[],this._sketching=!1,this.reset()):console.error("SKETCHPAD ERROR: No element selected")}Sketchpad.prototype._cursorPosition=function(t){return{x:t.pageX-$(this.canvas).offset().left,y:t.pageY-$(this.canvas).offset().top}},Sketchpad.prototype._draw=function(t,e,s,i){this._stroke(t,e,s,i,"source-over")},Sketchpad.prototype._erase=function(t,e,s,i){this._stroke(t,e,s,i,"destination-out")},Sketchpad.prototype._stroke=function(t,e,s,i,o){this.context.save(),this.context.lineJoin="round",this.context.lineCap="round",this.context.strokeStyle=s,this.context.lineWidth=i,this.context.globalCompositeOperation=o,this.context.beginPath(),this.context.moveTo(t.x,t.y),this.context.lineTo(e.x,e.y),this.context.closePath(),this.context.stroke(),this.context.restore()},Sketchpad.prototype._mouseDown=function(t){this._lastPosition=this._cursorPosition(t),this._currentStroke.color=this.color,this._currentStroke.size=this.penSize,this._currentStroke.lines=[],this._sketching=!0,this.canvas.addEventListener("mousemove",this._mouseMove)},Sketchpad.prototype._mouseUp=function(t){this._sketching&&(this.strokes.push($.extend(!0,{},this._currentStroke)),this._sketching=!1),this.canvas.removeEventListener("mousemove",this._mouseMove)},Sketchpad.prototype._mouseMove=function(t){var e=this._cursorPosition(t);this._draw(this._lastPosition,e,this.color,this.penSize),this._currentStroke.lines.push({start:$.extend(!0,{},this._lastPosition),end:$.extend(!0,{},e)}),this._lastPosition=e},Sketchpad.prototype._touchStart=function(t){t.preventDefault(),this._sketching||(this._lastPosition=this._cursorPosition(t.changedTouches[0]),this._currentStroke.color=this.color,this._currentStroke.size=this.penSize,this._currentStroke.lines=[],this._sketching=!0,this.canvas.addEventListener("touchmove",this._touchMove,!1))},Sketchpad.prototype._touchEnd=function(t){t.preventDefault(),this._sketching&&(this.strokes.push($.extend(!0,{},this._currentStroke)),this._sketching=!1),this.canvas.removeEventListener("touchmove",this._touchMove)},Sketchpad.prototype._touchCancel=function(t){t.preventDefault(),this._sketching&&(this.strokes.push($.extend(!0,{},this._currentStroke)),this._sketching=!1),this.canvas.removeEventListener("touchmove",this._touchMove)},Sketchpad.prototype._touchLeave=function(t){t.preventDefault(),this._sketching&&(this.strokes.push($.extend(!0,{},this._currentStroke)),this._sketching=!1),this.canvas.removeEventListener("touchmove",this._touchMove)},Sketchpad.prototype._touchMove=function(t){t.preventDefault();var e=this._cursorPosition(t.changedTouches[0]);this._draw(this._lastPosition,e,this.color,this.penSize),this._currentStroke.lines.push({start:$.extend(!0,{},this._lastPosition),end:$.extend(!0,{},e)}),this._lastPosition=e},Sketchpad.prototype.reset=function(){this.canvas=this.element[0],this.canvas.width=this._width,this.canvas.height=this._height,this.context=this.canvas.getContext("2d"),this.redraw(this.strokes),this.readOnly||(this.canvas.addEventListener("mousedown",this._mouseDown),this.canvas.addEventListener("mouseout",this._mouseUp),this.canvas.addEventListener("mouseup",this._mouseUp),this.canvas.addEventListener("touchstart",this._touchStart),this.canvas.addEventListener("touchend",this._touchEnd),this.canvas.addEventListener("touchcancel",this._touchCancel),this.canvas.addEventListener("touchleave",this._touchLeave))},Sketchpad.prototype.drawStroke=function(t){for(var