signature_pad_wechat
Version:
Library for drawing smooth signatures.
21 lines (18 loc) • 11.8 kB
JavaScript
/*!
* Signature Pad v0.1.0 | https://github.com/biggersun/signature_pad
* (c) 2020 biggersun | Released under the MIT license
*/
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var t=function(e,o){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])})(e,o)};function e(e,o){function n(){this.constructor=e}t(e,o),e.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}var o=function(){function t(t,e,o){this.x=t,this.y=e,this.time=o||Date.now()}return t.prototype.distanceTo=function(t){return Math.sqrt(Math.pow(this.x-t.x,2)+Math.pow(this.y-t.y,2))},t.prototype.equals=function(t){return this.x===t.x&&this.y===t.y&&this.time===t.time},t.prototype.velocityFrom=function(t){return this.time!==t.time?this.distanceTo(t)/(this.time-t.time):0},t}(),n=function(){function t(t,e,o,n,i,r){this.startPoint=t,this.control2=e,this.control1=o,this.endPoint=n,this.startWidth=i,this.endWidth=r}return t.fromPoints=function(e,o){var n=this.calculateControlPoints(e[0],e[1],e[2]).c2,i=this.calculateControlPoints(e[1],e[2],e[3]).c1;return new t(e[1],n,i,e[2],o.start,o.end)},t.calculateControlPoints=function(t,e,n){var i=t.x-e.x,r=t.y-e.y,s=e.x-n.x,a=e.y-n.y,h=(t.x+e.x)/2,c=(t.y+e.y)/2,u=(e.x+n.x)/2,l=(e.y+n.y)/2,d=Math.sqrt(i*i+r*r),v=Math.sqrt(s*s+a*a),p=v/(d+v),f=u+(h-u)*p,m=l+(c-l)*p,y=e.x-f,w=e.y-m;return{c1:new o(h+y,c+w),c2:new o(u+y,l+w)}},t.prototype.length=function(){for(var t,e,o=0,n=0;n<=10;n+=1){var i=n/10,r=this.point(i,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),s=this.point(i,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(n>0){var a=r-t,h=s-e;o+=Math.sqrt(a*a+h*h)}t=r,e=s}return o},t.prototype.point=function(t,e,o,n,i){return e*(1-t)*(1-t)*(1-t)+3*o*(1-t)*(1-t)*t+3*n*(1-t)*t*t+i*t*t*t},t}();var i=function(){function t(e,o){void 0===o&&(o={}),this.canvas=e,this.options=o,this.velocityFilterWeight=o.velocityFilterWeight||.7,this.minWidth=o.minWidth||.5,this.maxWidth=o.maxWidth||2.5,this.throttle="throttle"in o?o.throttle:16,this.minDistance="minDistance"in o?o.minDistance:5,this.dotSize=o.dotSize||function(){return(this.minWidth+this.maxWidth)/2},this.penColor=o.penColor||"black",this.backgroundColor=o.backgroundColor||"rgba(0,0,0,0)",this.strokeMoveUpdate=this.throttle?function(t,e){void 0===e&&(e=250);var o,n,i,r=0,s=null,a=function(){r=Date.now(),s=null,o=t.apply(n,i),s||(n=null,i=[])};return function(){for(var h=[],c=0;c<arguments.length;c++)h[c]=arguments[c];var u=Date.now(),l=e-(u-r);return n=this,i=h,l<=0||l>e?(s&&(clearTimeout(s),s=null),r=u,o=t.apply(n,i),s||(n=null,i=[])):s||(s=setTimeout(a,l)),o}}(t.prototype._strokeUpdate,this.throttle):t.prototype._strokeUpdate,this.ctx=e.getContext("2d"),this.clear()}return t.prototype.clear=function(){var t=this.ctx,e=this.canvas;t.fillStyle=this.backgroundColor,t.clearRect(0,0,e.width,e.height),t.fillRect(0,0,e.width,e.height),this.data=[],this.reset(),this._isEmpty=!0},t.prototype.isEmpty=function(){return this._isEmpty},t.prototype.toData=function(){return this.data},t.prototype.strokeBegin=function(t){var e={color:this.penColor,points:[]};this.data.push(e),this.reset(),this._strokeUpdate(t)},t.prototype._strokeUpdate=function(t){if(0!==this.data.length){var e=t.clientX||t.x,o=t.clientY||t.y,n=this._createPoint(e,o),i=this.data[this.data.length-1],r=i.points,s=r.length>0&&r[r.length-1],a=!!s&&n.distanceTo(s)<=this.minDistance,h=i.color;if(!s||!s||!a){var c=this._addPoint(n);s?c&&this._drawCurve({color:h,curve:c}):this._drawDot({color:h,point:n}),r.push({time:n.time,x:n.x,y:n.y})}}else this.strokeBegin(t)},t.prototype.strokeEnd=function(t){this._strokeUpdate(t)},t.prototype.reset=function(){this.lastPoints=[],this.lastVelocity=0,this.lastWidth=(this.minWidth+this.maxWidth)/2,this.ctx.fillStyle=this.penColor},t.prototype._createPoint=function(t,e){var n;return n=window&&window.HTMLCanvasElement&&this.canvas instanceof window.HTMLCanvasElement?this.canvas.getBoundingClientRect():{left:0,top:0},new o(t-n.left,e-n.top,(new Date).getTime())},t.prototype._addPoint=function(t){var e=this.lastPoints;if(e.push(t),e.length>2){3===e.length&&e.unshift(e[0]);var o=this._calculateCurveWidths(e[1],e[2]),i=n.fromPoints(e,o);return e.shift(),i}return null},t.prototype._calculateCurveWidths=function(t,e){var o=this.velocityFilterWeight*e.velocityFrom(t)+(1-this.velocityFilterWeight)*this.lastVelocity,n=this._strokeWidth(o),i={end:n,start:this.lastWidth};return this.lastVelocity=o,this.lastWidth=n,i},t.prototype._strokeWidth=function(t){return Math.max(this.maxWidth/(t+1),this.minWidth)},t.prototype._drawCurveSegment=function(t,e,o){var n=this.ctx;n.moveTo(t,e),n.arc(t,e,o,0,2*Math.PI,!1),this._isEmpty=!1},t.prototype._drawCurve=function(t){var e=t.color,o=t.curve,n=this.ctx,i=o.endWidth-o.startWidth,r=2*Math.floor(o.length());n.beginPath(),n.fillStyle=e;for(var s=0;s<r;s+=1){var a=s/r,h=a*a,c=h*a,u=1-a,l=u*u,d=l*u,v=d*o.startPoint.x;v+=3*l*a*o.control1.x,v+=3*u*h*o.control2.x,v+=c*o.endPoint.x;var p=d*o.startPoint.y;p+=3*l*a*o.control1.y,p+=3*u*h*o.control2.y,p+=c*o.endPoint.y;var f=Math.min(o.startWidth+c*i,this.maxWidth);this._drawCurveSegment(v,p,f)}n.closePath(),n.fill()},t.prototype._drawDot=function(t){var e=t.color,o=t.point,n=this.ctx,i="function"==typeof this.dotSize?this.dotSize():this.dotSize;n.beginPath(),this._drawCurveSegment(o.x,o.y,i),n.closePath(),n.fillStyle=e,n.fill()},t}(),r=function(t){function n(e,o){void 0===o&&(o={});var n=t.call(this,e,o)||this;return n._handleMouseDown=function(t){1===t.which&&(n._mouseButtonDown=!0,n.strokeBegin(t))},n._handleMouseMove=function(t){n._mouseButtonDown&&n.strokeMoveUpdate(t)},n._handleMouseUp=function(t){1===t.which&&n._mouseButtonDown&&(n._mouseButtonDown=!1,n.strokeEnd(t))},n._handleTouchStart=function(t){if(t.preventDefault(),1===t.targetTouches.length){var e=t.changedTouches[0];n.strokeBegin(e)}},n._handleTouchMove=function(t){t.preventDefault();var e=t.targetTouches[0];n.strokeMoveUpdate(e)},n._handleTouchEnd=function(t){if(t.target===n.canvas){t.preventDefault();var e=t.changedTouches[0];n.strokeEnd(e)}},n.onBegin=o.onBegin,n.onEnd=o.onEnd,n.on(),n}return e(n,t),n.prototype.fromDataURL=function(t,e,o){var n=this;void 0===e&&(e={});var i=new Image,r=e.ratio||window.devicePixelRatio||1,s=e.width||this.canvas.width/r,a=e.height||this.canvas.height/r;this.reset(),i.onload=function(){n.ctx.drawImage(i,0,0,s,a),o&&o()},i.onerror=function(t){o&&o(t)},i.src=t,this._isEmpty=!1},n.prototype.toDataURL=function(t,e){switch(void 0===t&&(t="image/png"),t){case"image/svg+xml":return this._toSVG();default:return this.canvas.toDataURL(t,e)}},n.prototype.on=function(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",window.PointerEvent?this._handlePointerEvents():(this._handleMouseEvents(),"ontouchstart"in window&&this._handleTouchEvents())},n.prototype.off=function(){this.canvas.style.touchAction="auto",this.canvas.style.msTouchAction="auto",this.canvas.removeEventListener("pointerdown",this._handleMouseDown),this.canvas.removeEventListener("pointermove",this._handleMouseMove),document.removeEventListener("pointerup",this._handleMouseUp),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this.canvas.removeEventListener("touchmove",this._handleTouchMove),this.canvas.removeEventListener("touchend",this._handleTouchEnd)},n.prototype.isEmpty=function(){return this._isEmpty},n.prototype.fromData=function(t){var e=this;this.clear(),this._fromData(t,(function(t){var o=t.color,n=t.curve;return e._drawCurve({color:o,curve:n})}),(function(t){var o=t.color,n=t.point;return e._drawDot({color:o,point:n})})),this.data=t},n.prototype.toData=function(){return this.data},n.prototype._handlePointerEvents=function(){this._mouseButtonDown=!1,this.canvas.addEventListener("pointerdown",this._handleMouseDown),this.canvas.addEventListener("pointermove",this._handleMouseMove),document.addEventListener("pointerup",this._handleMouseUp)},n.prototype._handleMouseEvents=function(){this._mouseButtonDown=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown),this.canvas.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)},n.prototype._handleTouchEvents=function(){this.canvas.addEventListener("touchstart",this._handleTouchStart),this.canvas.addEventListener("touchmove",this._handleTouchMove),this.canvas.addEventListener("touchend",this._handleTouchEnd)},n.prototype._fromData=function(t,e,n){for(var i=0,r=t;i<r.length;i++){var s=r[i],a=s.color,h=s.points;if(h.length>1)for(var c=0;c<h.length;c+=1){var u=h[c],l=new o(u.x,u.y,u.time);this.penColor=a,0===c&&this.reset();var d=this._addPoint(l);d&&e({color:a,curve:d})}else this.reset(),n({color:a,point:h[0]})}},n.prototype._toSVG=function(){var t=this,e=this.data,o=Math.max(window.devicePixelRatio||1,1),n=this.canvas.width/o,i=this.canvas.height/o,r=document.createElementNS("http://www.w3.org/2000/svg","svg");r.setAttribute("width",this.canvas.width.toString()),r.setAttribute("height",this.canvas.height.toString()),this._fromData(e,(function(t){var e=t.color,o=t.curve,n=document.createElement("path");if(!(isNaN(o.control1.x)||isNaN(o.control1.y)||isNaN(o.control2.x)||isNaN(o.control2.y))){var i="M "+o.startPoint.x.toFixed(3)+","+o.startPoint.y.toFixed(3)+" C "+o.control1.x.toFixed(3)+","+o.control1.y.toFixed(3)+" "+o.control2.x.toFixed(3)+","+o.control2.y.toFixed(3)+" "+o.endPoint.x.toFixed(3)+","+o.endPoint.y.toFixed(3);n.setAttribute("d",i),n.setAttribute("stroke-width",(2.25*o.endWidth).toFixed(3)),n.setAttribute("stroke",e),n.setAttribute("fill","none"),n.setAttribute("stroke-linecap","round"),r.appendChild(n)}}),(function(e){var o=e.color,n=e.point,i=document.createElement("circle"),s="function"==typeof t.dotSize?t.dotSize():t.dotSize;i.setAttribute("r",s.toString()),i.setAttribute("cx",n.x.toString()),i.setAttribute("cy",n.y.toString()),i.setAttribute("fill",o),r.appendChild(i)}));var s='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 '+n+" "+i+'" width="'+n+'" height="'+i+'">',a=r.innerHTML;if(void 0===a){var h=document.createElement("dummy"),c=r.childNodes;h.innerHTML="";for(var u=0;u<c.length;u+=1)h.appendChild(c[u].cloneNode(!0));a=h.innerHTML}return"data:image/svg+xml;base64,"+btoa(s+a+"</svg>")},n}(i),s=function(t){function o(e,o){void 0===o&&(o={});var n=t.call(this,e,o)||this;return n.handleTouchStart=function(t){if(1===t.touches.length){var e=t.changedTouches[0];n.strokeBegin(e)}},n.handleTouchMove=function(t){var e=t.changedTouches[0];n.strokeMoveUpdate(e)},n.handleTouchEnd=function(t){var e=t.changedTouches[0];n.strokeEnd(e)},n}return e(o,t),o}(i);export{r as SignaturePad,s as SignaturePadWechat};
//# sourceMappingURL=signature_pad.min.js.map