https://www.wpdaxue.com/wp-content/cache/min/1/wp-content/themes/b…/library/sketchpad.js?ver=1788334796

1function Sketchpad(config){for(var key in this.constructor.prototype){this[key]=this[key].bind(this)}
2if(!config.hasOwnProperty('element')){console.error('SKETCHPAD ERROR: No element selected');return}
3if(typeof(config.element)==='string'){this.element=document.querySelector(config.element)}else{this.element=config.element}
4this._width=config.width||0;this._height=config.height||0;this.color=config.color||'#000000';this.penSize=config.penSize||5;this.readOnly=config.readOnly||!1;if(!this.readOnly){this.element.style.cursor='crosshair'}
5this.strokes=config.strokes||[];this._currentStroke={color:null,size:null,lines:[],};this.undoHistory=config.undoHistory||[];this.animateIds=[];this._sketching=!1;this.reset()}
6function getOffset(el){const box=el.getBoundingClientRect();return{top:box.top+window.pageYOffset-document.documentElement.clientTop,left:box.left+window.pageXOffset-document.documentElement.clientLeft}}
7Sketchpad.prototype._cursorPosition=function(event){return{x:event.pageX-getOffset(this.canvas).left,y:event.pageY-getOffset(this.canvas).top,}};Sketchpad.prototype._draw=function(start,end,color,size){this._stroke(start,end,color,size,'source-over')};Sketchpad.prototype._erase=function(start,end,color,size){this._stroke(start,end,color,size,'destination-out')};Sketchpad.prototype._stroke=function(start,end,color,size,compositeOperation){this.context.save();this.context.lineJoin='round';this.context.lineCap='round';this.context.strokeStyle=color;this.context.lineWidth=size;this.context.globalCompositeOperation=compositeOperation;this.context.beginPath();this.context.moveTo(start.x,start.y);this.context.lineTo(end.x,end.y);this.context.closePath();this.context.stroke();this.context.restore()};Sketchpad.prototype._mouseDown=function(event){this._lastPosition=this._cursorPosition(event);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(event){if(this._sketching){if(this._currentStroke.lines.length>0){this.strokes.push(Object.assign(!0,{},this._currentStroke))}
8this._sketching=!1}
9this.canvas.removeEventListener('mousemove',this._mouseMove)};Sketchpad.prototype._mouseMove=function(event){var currentPosition=this._cursorPosition(event);this._draw(this._lastPosition,currentPosition,this.color,this.penSize);this._currentStroke.lines.push({start:Object.assign(!0,{},this._lastPosition),end:Object.assign(!0,{},currentPosition),});this._lastPosition=currentPosition};Sketchpad.prototype._touchStart=function(event){event.preventDefault();if(this._sketching){return}
10this._lastPosition=this._cursorPosition(event.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(event){event.preventDefault();if(this._sketching){this.strokes.push(Object.assign(!0,{},this._currentStroke));this._sketching=!1}
11this.canvas.removeEventListener('touchmove',this._touchMove)};Sketchpad.prototype._touchCancel=function(event){event.preventDefault();if(this._sketching){this.strokes.push(Object.assign(!0,{},this._currentStroke));this._sketching=!1}
12this.canvas.removeEventListener('touchmove',this._touchMove)};Sketchpad.prototype._touchLeave=function(event){event.preventDefault();if(this._sketching){this.strokes.push(Object.assign(!0,{},this._currentStroke));this._sketching=!1}
13this.canvas.removeEventListener('touchmove',this._touchMove)};Sketchpad.prototype._touchMove=function(event){event.preventDefault();var currentPosition=this._cursorPosition(event.changedTouches[0]);this._draw(this._lastPosition,currentPosition,this.color,this.penSize);this._currentStroke.lines.push({start:Object.assign(!0,{},this._lastPosition),end:Object.assign(!0,{},currentPosition),});this._lastPosition=currentPosition};Sketchpad.prototype.reset=function(__width){this.canvas=this.element;this.canvas.width=__width?__width:this._width;this.canvas.height=this._height;this.context=this.canvas.getContext('2d');this.redraw(this.strokes);if(this.readOnly){return}
14this.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(stroke){for(var j=0;j<stroke.lines.length;j++){var line=stroke.lines[j];this._draw(line.start,line.end,stroke.color,stroke.size)}};

14Sketchpad.prototype.redraw=function(strokes){for(var i=0;i<strokes.length;i++){this.drawStroke(strokes[i])}};Sketchpad.prototype.toObject=function(){return{width:this.canvas.width,height:this.canvas.height,strokes:this.strokes,undoHistory:this.undoHistory,}};Sketchpad.prototype.toJSON=function(){return JSON.stringify(this.toObject())};Sketchpad.prototype.animate=function(ms,loop,loopDelay){this.clear();var delay=ms;var callback=null;for(var i=0;i<this.strokes.length;i++){var stroke=this.strokes[i];for(var j=0;j<stroke.lines.length;j++){var line=stroke.lines[j];callback=this._draw.bind(this,line.start,line.end,stroke.color,stroke.size);this.animateIds.push(setTimeout(callback,delay));delay+=ms}}
15if(loop){loopDelay=loopDelay||0;callback=this.animate.bind(this,ms,loop,loopDelay);this.animateIds.push(setTimeout(callback,delay+loopDelay))}};Sketchpad.prototype.cancelAnimation=function(){for(var i=0;i<this.animateIds.length;i++){clearTimeout(this.animateIds[i])}};Sketchpad.prototype.clearAll=function(){this.strokes=[]
16this.context.clearRect(0,0,this.canvas.width,this.canvas.height)};Sketchpad.prototype.clear=function(){this.context.clearRect(0,0,this.canvas.width,this.canvas.height)};Sketchpad.prototype.undo=function(){this.clear();var stroke=this.strokes.pop();if(stroke){this.undoHistory.push(stroke);this.redraw(this.strokes)}};Sketchpad.prototype.redo=function(){var stroke=this.undoHistory.pop();if(stroke){this.strokes.push(stroke);this.drawStroke(stroke)}}