signature_pad
Advanced tools
Comparing version 1.6.0-beta.4 to 1.6.0-beta.5
/*! | ||
* Signature Pad v1.6.0-beta.4 | ||
* Signature Pad v1.6.0-beta.5 | ||
* https://github.com/szimek/signature_pad | ||
@@ -18,508 +18,498 @@ * | ||
*/ | ||
(function (global, factory) { | ||
if (typeof define === "function" && define.amd) { | ||
define(['exports'], factory); | ||
} else if (typeof exports !== "undefined") { | ||
factory(exports); | ||
} else { | ||
var mod = { | ||
exports: {} | ||
}; | ||
factory(mod.exports); | ||
global.SignaturePad = mod.exports; | ||
} | ||
})(this, function (exports) { | ||
'use strict'; | ||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
typeof define === 'function' && define.amd ? define(factory) : | ||
(global.SignaturePad = factory()); | ||
}(this, (function () { 'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
function Point(x, y, time) { | ||
this.x = x; | ||
this.y = y; | ||
this.time = time || new Date().getTime(); | ||
} | ||
function Point(x, y, time) { | ||
this.x = x; | ||
this.y = y; | ||
this.time = time || new Date().getTime(); | ||
} | ||
Point.prototype.velocityFrom = function (start) { | ||
return this.time !== start.time ? this.distanceTo(start) / (this.time - start.time) : 1; | ||
}; | ||
Point.prototype.velocityFrom = function (start) { | ||
return this.time !== start.time ? this.distanceTo(start) / (this.time - start.time) : 1; | ||
}; | ||
Point.prototype.distanceTo = function (start) { | ||
return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2)); | ||
}; | ||
Point.prototype.distanceTo = function (start) { | ||
return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2)); | ||
}; | ||
function Bezier(startPoint, control1, control2, endPoint) { | ||
this.startPoint = startPoint; | ||
this.control1 = control1; | ||
this.control2 = control2; | ||
this.endPoint = endPoint; | ||
} | ||
function Bezier(startPoint, control1, control2, endPoint) { | ||
this.startPoint = startPoint; | ||
this.control1 = control1; | ||
this.control2 = control2; | ||
this.endPoint = endPoint; | ||
} | ||
// Returns approximated length. | ||
Bezier.prototype.length = function () { | ||
var steps = 10; | ||
var length = 0; | ||
var px = void 0; | ||
var py = void 0; | ||
// Returns approximated length. | ||
Bezier.prototype.length = function () { | ||
var steps = 10; | ||
var length = 0; | ||
var px = void 0; | ||
var py = void 0; | ||
for (var i = 0; i <= steps; i += 1) { | ||
var t = i / steps; | ||
var cx = this._point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x); | ||
var cy = this._point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y); | ||
if (i > 0) { | ||
var xdiff = cx - px; | ||
var ydiff = cy - py; | ||
length += Math.sqrt(xdiff * xdiff + ydiff * ydiff); | ||
} | ||
px = cx; | ||
py = cy; | ||
for (var i = 0; i <= steps; i += 1) { | ||
var t = i / steps; | ||
var cx = this._point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x); | ||
var cy = this._point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y); | ||
if (i > 0) { | ||
var xdiff = cx - px; | ||
var ydiff = cy - py; | ||
length += Math.sqrt(xdiff * xdiff + ydiff * ydiff); | ||
} | ||
px = cx; | ||
py = cy; | ||
} | ||
return length; | ||
}; | ||
return length; | ||
}; | ||
/* eslint-disable no-multi-spaces, space-in-parens */ | ||
Bezier.prototype._point = function (t, start, c1, c2, end) { | ||
return start * (1.0 - t) * (1.0 - t) * (1.0 - t) + 3.0 * c1 * (1.0 - t) * (1.0 - t) * t + 3.0 * c2 * (1.0 - t) * t * t + end * t * t * t; | ||
/* eslint-disable no-multi-spaces, space-in-parens */ | ||
Bezier.prototype._point = function (t, start, c1, c2, end) { | ||
return start * (1.0 - t) * (1.0 - t) * (1.0 - t) + 3.0 * c1 * (1.0 - t) * (1.0 - t) * t + 3.0 * c2 * (1.0 - t) * t * t + end * t * t * t; | ||
}; | ||
function SignaturePad(canvas, options) { | ||
var self = this; | ||
var opts = options || {}; | ||
this.velocityFilterWeight = opts.velocityFilterWeight || 0.7; | ||
this.minWidth = opts.minWidth || 0.5; | ||
this.maxWidth = opts.maxWidth || 2.5; | ||
this.dotSize = opts.dotSize || function () { | ||
return (this.minWidth + this.maxWidth) / 2; | ||
}; | ||
/* eslint-enable no-multi-spaces, space-in-parens */ | ||
this.penColor = opts.penColor || 'black'; | ||
this.backgroundColor = opts.backgroundColor || 'rgba(0,0,0,0)'; | ||
this.onBegin = opts.onBegin; | ||
this.onEnd = opts.onEnd; | ||
function SignaturePad(canvas, options) { | ||
var self = this; | ||
var opts = options || {}; | ||
this._canvas = canvas; | ||
this._ctx = canvas.getContext('2d'); | ||
this.clear(); | ||
this.velocityFilterWeight = opts.velocityFilterWeight || 0.7; | ||
this.minWidth = opts.minWidth || 0.5; | ||
this.maxWidth = opts.maxWidth || 2.5; | ||
this.dotSize = opts.dotSize || function () { | ||
return (this.minWidth + this.maxWidth) / 2; | ||
}; | ||
this.penColor = opts.penColor || 'black'; | ||
this.backgroundColor = opts.backgroundColor || 'rgba(0,0,0,0)'; | ||
this.onBegin = opts.onBegin; | ||
this.onEnd = opts.onEnd; | ||
// We need add these inline so they are available to unbind while still having | ||
// access to 'self' we could use _.bind but it's not worth adding a dependency. | ||
this._handleMouseDown = function (event) { | ||
if (event.which === 1) { | ||
self._mouseButtonDown = true; | ||
self._strokeBegin(event); | ||
} | ||
}; | ||
this._canvas = canvas; | ||
this._ctx = canvas.getContext('2d'); | ||
this.clear(); | ||
this._handleMouseMove = function (event) { | ||
if (self._mouseButtonDown) { | ||
self._strokeUpdate(event); | ||
} | ||
}; | ||
// We need add these inline so they are available to unbind while still having | ||
// access to 'self' we could use _.bind but it's not worth adding a dependency. | ||
this._handleMouseDown = function (event) { | ||
if (event.which === 1) { | ||
self._mouseButtonDown = true; | ||
self._strokeBegin(event); | ||
} | ||
}; | ||
this._handleMouseUp = function (event) { | ||
if (event.which === 1 && self._mouseButtonDown) { | ||
self._mouseButtonDown = false; | ||
self._strokeEnd(event); | ||
} | ||
}; | ||
this._handleMouseMove = function (event) { | ||
if (self._mouseButtonDown) { | ||
self._strokeUpdate(event); | ||
} | ||
}; | ||
this._handleTouchStart = function (event) { | ||
if (event.targetTouches.length === 1) { | ||
var touch = event.changedTouches[0]; | ||
self._strokeBegin(touch); | ||
} | ||
}; | ||
this._handleMouseUp = function (event) { | ||
if (event.which === 1 && self._mouseButtonDown) { | ||
self._mouseButtonDown = false; | ||
self._strokeEnd(event); | ||
} | ||
}; | ||
this._handleTouchMove = function (event) { | ||
// Prevent scrolling. | ||
event.preventDefault(); | ||
this._handleTouchStart = function (event) { | ||
if (event.targetTouches.length === 1) { | ||
var touch = event.changedTouches[0]; | ||
self._strokeBegin(touch); | ||
} | ||
}; | ||
var touch = event.targetTouches[0]; | ||
self._strokeUpdate(touch); | ||
}; | ||
this._handleTouchMove = function (event) { | ||
// Prevent scrolling. | ||
this._handleTouchEnd = function (event) { | ||
var wasCanvasTouched = event.target === self._canvas; | ||
if (wasCanvasTouched) { | ||
event.preventDefault(); | ||
self._strokeEnd(event); | ||
} | ||
}; | ||
var touch = event.targetTouches[0]; | ||
self._strokeUpdate(touch); | ||
}; | ||
// Enable mouse and touch event handlers | ||
this.on(); | ||
} | ||
this._handleTouchEnd = function (event) { | ||
var wasCanvasTouched = event.target === self._canvas; | ||
if (wasCanvasTouched) { | ||
event.preventDefault(); | ||
self._strokeEnd(event); | ||
} | ||
}; | ||
// Public methods | ||
SignaturePad.prototype.clear = function () { | ||
var ctx = this._ctx; | ||
var canvas = this._canvas; | ||
// Enable mouse and touch event handlers | ||
this.on(); | ||
} | ||
ctx.fillStyle = this.backgroundColor; | ||
ctx.clearRect(0, 0, canvas.width, canvas.height); | ||
ctx.fillRect(0, 0, canvas.width, canvas.height); | ||
// Public methods | ||
SignaturePad.prototype.clear = function () { | ||
var ctx = this._ctx; | ||
var canvas = this._canvas; | ||
this._data = []; | ||
this._reset(); | ||
this._isEmpty = true; | ||
}; | ||
ctx.fillStyle = this.backgroundColor; | ||
ctx.clearRect(0, 0, canvas.width, canvas.height); | ||
ctx.fillRect(0, 0, canvas.width, canvas.height); | ||
SignaturePad.prototype.fromDataURL = function (dataUrl) { | ||
var _this = this; | ||
this._data = []; | ||
this._reset(); | ||
this._isEmpty = true; | ||
}; | ||
var image = new Image(); | ||
var ratio = window.devicePixelRatio || 1; | ||
var width = this._canvas.width / ratio; | ||
var height = this._canvas.height / ratio; | ||
SignaturePad.prototype.fromDataURL = function (dataUrl) { | ||
var _this = this; | ||
var image = new Image(); | ||
var ratio = window.devicePixelRatio || 1; | ||
var width = this._canvas.width / ratio; | ||
var height = this._canvas.height / ratio; | ||
this._reset(); | ||
image.src = dataUrl; | ||
image.onload = function () { | ||
_this._ctx.drawImage(image, 0, 0, width, height); | ||
}; | ||
this._isEmpty = false; | ||
this._reset(); | ||
image.src = dataUrl; | ||
image.onload = function () { | ||
_this._ctx.drawImage(image, 0, 0, width, height); | ||
}; | ||
this._isEmpty = false; | ||
}; | ||
SignaturePad.prototype.toDataURL = function (type) { | ||
var _canvas; | ||
SignaturePad.prototype.toDataURL = function (type) { | ||
var _canvas; | ||
switch (type) { | ||
case 'image/svg+xml': | ||
return this._toSVG(); | ||
default: | ||
for (var _len = arguments.length, options = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
options[_key - 1] = arguments[_key]; | ||
} | ||
switch (type) { | ||
case 'image/svg+xml': | ||
return this._toSVG(); | ||
default: | ||
for (var _len = arguments.length, options = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
options[_key - 1] = arguments[_key]; | ||
} | ||
return (_canvas = this._canvas).toDataURL.apply(_canvas, [type].concat(options)); | ||
} | ||
}; | ||
return (_canvas = this._canvas).toDataURL.apply(_canvas, [type].concat(options)); | ||
} | ||
}; | ||
SignaturePad.prototype.on = function () { | ||
this._handleMouseEvents(); | ||
this._handleTouchEvents(); | ||
}; | ||
SignaturePad.prototype.on = function () { | ||
this._handleMouseEvents(); | ||
this._handleTouchEvents(); | ||
}; | ||
SignaturePad.prototype.off = function () { | ||
this._canvas.removeEventListener('mousedown', this._handleMouseDown); | ||
this._canvas.removeEventListener('mousemove', this._handleMouseMove); | ||
document.removeEventListener('mouseup', this._handleMouseUp); | ||
SignaturePad.prototype.off = function () { | ||
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); | ||
}; | ||
this._canvas.removeEventListener('touchstart', this._handleTouchStart); | ||
this._canvas.removeEventListener('touchmove', this._handleTouchMove); | ||
this._canvas.removeEventListener('touchend', this._handleTouchEnd); | ||
}; | ||
SignaturePad.prototype.isEmpty = function () { | ||
return this._isEmpty; | ||
}; | ||
SignaturePad.prototype.isEmpty = function () { | ||
return this._isEmpty; | ||
}; | ||
// Private methods | ||
SignaturePad.prototype._strokeBegin = function (event) { | ||
this._data.push([]); | ||
this._reset(); | ||
this._strokeUpdate(event); | ||
// Private methods | ||
SignaturePad.prototype._strokeBegin = function (event) { | ||
this._data.push([]); | ||
this._reset(); | ||
this._strokeUpdate(event); | ||
if (typeof this.onBegin === 'function') { | ||
this.onBegin(event); | ||
} | ||
}; | ||
if (typeof this.onBegin === 'function') { | ||
this.onBegin(event); | ||
} | ||
}; | ||
SignaturePad.prototype._strokeUpdate = function (event) { | ||
var x = event.clientX; | ||
var y = event.clientY; | ||
SignaturePad.prototype._strokeUpdate = function (event) { | ||
var x = event.clientX; | ||
var y = event.clientY; | ||
var point = this._createPoint(x, y); | ||
var point = this._createPoint(x, y); | ||
var _addPoint = this._addPoint(point), | ||
curve = _addPoint.curve, | ||
widths = _addPoint.widths; | ||
var _addPoint = this._addPoint(point), | ||
curve = _addPoint.curve, | ||
widths = _addPoint.widths; | ||
if (curve && widths) { | ||
this._drawCurve(curve, widths.start, widths.end); | ||
} | ||
if (curve && widths) { | ||
this._drawCurve(curve, widths.start, widths.end); | ||
} | ||
this._data[this._data.length - 1].push({ | ||
x: point.x, | ||
y: point.y, | ||
time: point.time | ||
}); | ||
}; | ||
this._data[this._data.length - 1].push({ | ||
x: point.x, | ||
y: point.y, | ||
time: point.time | ||
}); | ||
}; | ||
SignaturePad.prototype._strokeEnd = function (event) { | ||
var canDrawCurve = this.points.length > 2; | ||
var point = this.points[0]; | ||
SignaturePad.prototype._strokeEnd = function (event) { | ||
var canDrawCurve = this.points.length > 2; | ||
var point = this.points[0]; | ||
if (!canDrawCurve && point) { | ||
this._drawDot(point); | ||
} | ||
if (!canDrawCurve && point) { | ||
this._drawDot(point); | ||
} | ||
if (typeof this.onEnd === 'function') { | ||
this.onEnd(event); | ||
} | ||
}; | ||
if (typeof this.onEnd === 'function') { | ||
this.onEnd(event); | ||
} | ||
}; | ||
SignaturePad.prototype._handleMouseEvents = function () { | ||
this._mouseButtonDown = false; | ||
SignaturePad.prototype._handleMouseEvents = function () { | ||
this._mouseButtonDown = false; | ||
this._canvas.addEventListener('mousedown', this._handleMouseDown); | ||
this._canvas.addEventListener('mousemove', this._handleMouseMove); | ||
document.addEventListener('mouseup', this._handleMouseUp); | ||
}; | ||
this._canvas.addEventListener('mousedown', this._handleMouseDown); | ||
this._canvas.addEventListener('mousemove', this._handleMouseMove); | ||
document.addEventListener('mouseup', this._handleMouseUp); | ||
}; | ||
SignaturePad.prototype._handleTouchEvents = function () { | ||
// Pass touch events to canvas element on mobile IE11 and Edge. | ||
this._canvas.style.msTouchAction = 'none'; | ||
this._canvas.style.touchAction = 'none'; | ||
SignaturePad.prototype._handleTouchEvents = function () { | ||
// Pass touch events to canvas element on mobile IE11 and Edge. | ||
this._canvas.style.msTouchAction = 'none'; | ||
this._canvas.style.touchAction = 'none'; | ||
this._canvas.addEventListener('touchstart', this._handleTouchStart); | ||
this._canvas.addEventListener('touchmove', this._handleTouchMove); | ||
this._canvas.addEventListener('touchend', this._handleTouchEnd); | ||
}; | ||
this._canvas.addEventListener('touchstart', this._handleTouchStart); | ||
this._canvas.addEventListener('touchmove', this._handleTouchMove); | ||
this._canvas.addEventListener('touchend', this._handleTouchEnd); | ||
}; | ||
SignaturePad.prototype._reset = function () { | ||
this.points = []; | ||
this._lastVelocity = 0; | ||
this._lastWidth = (this.minWidth + this.maxWidth) / 2; | ||
this._ctx.fillStyle = this.penColor; | ||
}; | ||
SignaturePad.prototype._reset = function () { | ||
this.points = []; | ||
this._lastVelocity = 0; | ||
this._lastWidth = (this.minWidth + this.maxWidth) / 2; | ||
this._ctx.fillStyle = this.penColor; | ||
}; | ||
SignaturePad.prototype._createPoint = function (x, y, time) { | ||
var rect = this._canvas.getBoundingClientRect(); | ||
SignaturePad.prototype._createPoint = function (x, y, time) { | ||
var rect = this._canvas.getBoundingClientRect(); | ||
return new Point(x - rect.left, y - rect.top, time || new Date().getTime()); | ||
}; | ||
return new Point(x - rect.left, y - rect.top, time || new Date().getTime()); | ||
}; | ||
SignaturePad.prototype._addPoint = function (point) { | ||
var points = this.points; | ||
var tmp = void 0; | ||
SignaturePad.prototype._addPoint = function (point) { | ||
var points = this.points; | ||
var tmp = void 0; | ||
points.push(point); | ||
points.push(point); | ||
if (points.length > 2) { | ||
// To reduce the initial lag make it work with 3 points | ||
// by copying the first point to the beginning. | ||
if (points.length === 3) points.unshift(points[0]); | ||
if (points.length > 2) { | ||
// To reduce the initial lag make it work with 3 points | ||
// by copying the first point to the beginning. | ||
if (points.length === 3) points.unshift(points[0]); | ||
tmp = this._calculateCurveControlPoints(points[0], points[1], points[2]); | ||
var c2 = tmp.c2; | ||
tmp = this._calculateCurveControlPoints(points[1], points[2], points[3]); | ||
var c3 = tmp.c1; | ||
var curve = new Bezier(points[1], c2, c3, points[2]); | ||
var widths = this._calculateCurveWidths(curve); | ||
tmp = this._calculateCurveControlPoints(points[0], points[1], points[2]); | ||
var c2 = tmp.c2; | ||
tmp = this._calculateCurveControlPoints(points[1], points[2], points[3]); | ||
var c3 = tmp.c1; | ||
var curve = new Bezier(points[1], c2, c3, points[2]); | ||
var widths = this._calculateCurveWidths(curve); | ||
// Remove the first element from the list, | ||
// so that we always have no more than 4 points in points array. | ||
points.shift(); | ||
// Remove the first element from the list, | ||
// so that we always have no more than 4 points in points array. | ||
points.shift(); | ||
return { curve: curve, widths: widths }; | ||
} | ||
return { curve: curve, widths: widths }; | ||
} | ||
return {}; | ||
}; | ||
return {}; | ||
}; | ||
SignaturePad.prototype._calculateCurveControlPoints = function (s1, s2, s3) { | ||
var dx1 = s1.x - s2.x; | ||
var dy1 = s1.y - s2.y; | ||
var dx2 = s2.x - s3.x; | ||
var dy2 = s2.y - s3.y; | ||
SignaturePad.prototype._calculateCurveControlPoints = function (s1, s2, s3) { | ||
var dx1 = s1.x - s2.x; | ||
var dy1 = s1.y - s2.y; | ||
var dx2 = s2.x - s3.x; | ||
var dy2 = s2.y - s3.y; | ||
var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 }; | ||
var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 }; | ||
var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 }; | ||
var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 }; | ||
var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1); | ||
var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2); | ||
var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1); | ||
var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2); | ||
var dxm = m1.x - m2.x; | ||
var dym = m1.y - m2.y; | ||
var dxm = m1.x - m2.x; | ||
var dym = m1.y - m2.y; | ||
var k = l2 / (l1 + l2); | ||
var cm = { x: m2.x + dxm * k, y: m2.y + dym * k }; | ||
var k = l2 / (l1 + l2); | ||
var cm = { x: m2.x + dxm * k, y: m2.y + dym * k }; | ||
var tx = s2.x - cm.x; | ||
var ty = s2.y - cm.y; | ||
var tx = s2.x - cm.x; | ||
var ty = s2.y - cm.y; | ||
return { | ||
c1: new Point(m1.x + tx, m1.y + ty), | ||
c2: new Point(m2.x + tx, m2.y + ty) | ||
}; | ||
return { | ||
c1: new Point(m1.x + tx, m1.y + ty), | ||
c2: new Point(m2.x + tx, m2.y + ty) | ||
}; | ||
}; | ||
SignaturePad.prototype._calculateCurveWidths = function (curve) { | ||
var startPoint = curve.startPoint; | ||
var endPoint = curve.endPoint; | ||
var widths = { start: null, end: null }; | ||
SignaturePad.prototype._calculateCurveWidths = function (curve) { | ||
var startPoint = curve.startPoint; | ||
var endPoint = curve.endPoint; | ||
var widths = { start: null, end: null }; | ||
var velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) + (1 - this.velocityFilterWeight) * this._lastVelocity; | ||
var velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) + (1 - this.velocityFilterWeight) * this._lastVelocity; | ||
var newWidth = this._strokeWidth(velocity); | ||
var newWidth = this._strokeWidth(velocity); | ||
widths.start = this._lastWidth; | ||
widths.end = newWidth; | ||
widths.start = this._lastWidth; | ||
widths.end = newWidth; | ||
this._lastVelocity = velocity; | ||
this._lastWidth = newWidth; | ||
this._lastVelocity = velocity; | ||
this._lastWidth = newWidth; | ||
return widths; | ||
}; | ||
return widths; | ||
}; | ||
SignaturePad.prototype._strokeWidth = function (velocity) { | ||
return Math.max(this.maxWidth / (velocity + 1), this.minWidth); | ||
}; | ||
SignaturePad.prototype._strokeWidth = function (velocity) { | ||
return Math.max(this.maxWidth / (velocity + 1), this.minWidth); | ||
}; | ||
SignaturePad.prototype._drawPoint = function (x, y, size) { | ||
var ctx = this._ctx; | ||
SignaturePad.prototype._drawPoint = function (x, y, size) { | ||
var ctx = this._ctx; | ||
ctx.moveTo(x, y); | ||
ctx.arc(x, y, size, 0, 2 * Math.PI, false); | ||
this._isEmpty = false; | ||
}; | ||
ctx.moveTo(x, y); | ||
ctx.arc(x, y, size, 0, 2 * Math.PI, false); | ||
this._isEmpty = false; | ||
}; | ||
SignaturePad.prototype._drawCurve = function (curve, startWidth, endWidth) { | ||
var ctx = this._ctx; | ||
var widthDelta = endWidth - startWidth; | ||
var drawSteps = Math.floor(curve.length()); | ||
SignaturePad.prototype._drawCurve = function (curve, startWidth, endWidth) { | ||
var ctx = this._ctx; | ||
var widthDelta = endWidth - startWidth; | ||
var drawSteps = Math.floor(curve.length()); | ||
ctx.beginPath(); | ||
ctx.beginPath(); | ||
for (var i = 0; i < drawSteps; i += 1) { | ||
// Calculate the Bezier (x, y) coordinate for this step. | ||
var t = i / drawSteps; | ||
var tt = t * t; | ||
var ttt = tt * t; | ||
var u = 1 - t; | ||
var uu = u * u; | ||
var uuu = uu * u; | ||
for (var i = 0; i < drawSteps; i += 1) { | ||
// Calculate the Bezier (x, y) coordinate for this step. | ||
var t = i / drawSteps; | ||
var tt = t * t; | ||
var ttt = tt * t; | ||
var u = 1 - t; | ||
var uu = u * u; | ||
var uuu = uu * u; | ||
var x = uuu * curve.startPoint.x; | ||
x += 3 * uu * t * curve.control1.x; | ||
x += 3 * u * tt * curve.control2.x; | ||
x += ttt * curve.endPoint.x; | ||
var x = uuu * curve.startPoint.x; | ||
x += 3 * uu * t * curve.control1.x; | ||
x += 3 * u * tt * curve.control2.x; | ||
x += ttt * curve.endPoint.x; | ||
var y = uuu * curve.startPoint.y; | ||
y += 3 * uu * t * curve.control1.y; | ||
y += 3 * u * tt * curve.control2.y; | ||
y += ttt * curve.endPoint.y; | ||
var y = uuu * curve.startPoint.y; | ||
y += 3 * uu * t * curve.control1.y; | ||
y += 3 * u * tt * curve.control2.y; | ||
y += ttt * curve.endPoint.y; | ||
var width = startWidth + ttt * widthDelta; | ||
this._drawPoint(x, y, width); | ||
} | ||
var width = startWidth + ttt * widthDelta; | ||
this._drawPoint(x, y, width); | ||
} | ||
ctx.closePath(); | ||
ctx.fill(); | ||
}; | ||
ctx.closePath(); | ||
ctx.fill(); | ||
}; | ||
SignaturePad.prototype._drawDot = function (point) { | ||
var ctx = this._ctx; | ||
var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize; | ||
SignaturePad.prototype._drawDot = function (point) { | ||
var ctx = this._ctx; | ||
var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize; | ||
ctx.beginPath(); | ||
this._drawPoint(point.x, point.y, width); | ||
ctx.closePath(); | ||
ctx.fill(); | ||
}; | ||
ctx.beginPath(); | ||
this._drawPoint(point.x, point.y, width); | ||
ctx.closePath(); | ||
ctx.fill(); | ||
}; | ||
SignaturePad.prototype._fromData = function (pointGroups, drawCurve, drawDot) { | ||
for (var i = 0; i < pointGroups.length; i += 1) { | ||
var group = pointGroups[i]; | ||
SignaturePad.prototype._fromData = function (pointGroups, drawCurve, drawDot) { | ||
for (var i = 0; i < pointGroups.length; i += 1) { | ||
var group = pointGroups[i]; | ||
if (group.length > 1) { | ||
for (var j = 0; j < group.length; j += 1) { | ||
var rawPoint = group[j]; | ||
var point = new Point(rawPoint.x, rawPoint.y, rawPoint.time); | ||
if (group.length > 1) { | ||
for (var j = 0; j < group.length; j += 1) { | ||
var rawPoint = group[j]; | ||
var point = new Point(rawPoint.x, rawPoint.y, rawPoint.time); | ||
if (j === 0) { | ||
// First point in a group. Nothing to draw yet. | ||
this._reset(); | ||
this._addPoint(point); | ||
} else if (j !== group.length - 1) { | ||
var _addPoint2 = this._addPoint(point), | ||
curve = _addPoint2.curve, | ||
widths = _addPoint2.widths; | ||
if (j === 0) { | ||
// First point in a group. Nothing to draw yet. | ||
this._reset(); | ||
this._addPoint(point); | ||
} else if (j !== group.length - 1) { | ||
// Middle point in a group. | ||
var _addPoint2 = this._addPoint(point), | ||
curve = _addPoint2.curve, | ||
widths = _addPoint2.widths; | ||
if (curve && widths) { | ||
drawCurve(curve, widths); | ||
} | ||
} else { | ||
// Last point in a group. Do nothing. | ||
if (curve && widths) { | ||
drawCurve(curve, widths); | ||
} | ||
} else { | ||
// Last point in a group. Do nothing. | ||
} | ||
} else { | ||
this._reset(); | ||
var _rawPoint = group[0]; | ||
drawDot(_rawPoint); | ||
} | ||
} else { | ||
this._reset(); | ||
var _rawPoint = group[0]; | ||
drawDot(_rawPoint); | ||
} | ||
}; | ||
} | ||
}; | ||
SignaturePad.prototype._toSVG = function () { | ||
var _this2 = this; | ||
SignaturePad.prototype._toSVG = function () { | ||
var _this2 = this; | ||
var pointGroups = this._data; | ||
var canvas = this._canvas; | ||
var minX = 0; | ||
var minY = 0; | ||
var maxX = canvas.width; | ||
var maxY = canvas.height; | ||
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); | ||
var pointGroups = this._data; | ||
var canvas = this._canvas; | ||
var minX = 0; | ||
var minY = 0; | ||
var maxX = canvas.width; | ||
var maxY = canvas.height; | ||
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); | ||
svg.setAttributeNS(null, 'width', canvas.width); | ||
svg.setAttributeNS(null, 'height', canvas.height); | ||
svg.setAttributeNS(null, 'width', canvas.width); | ||
svg.setAttributeNS(null, 'height', canvas.height); | ||
this._fromData(pointGroups, function (curve, widths) { | ||
var path = document.createElementNS('http;//www.w3.org/2000/svg', 'path'); | ||
this._fromData(pointGroups, function (curve, widths) { | ||
var path = document.createElementNS('http;//www.w3.org/2000/svg', 'path'); | ||
// Need to check curve for NaN values, these pop up when drawing | ||
// lines on the canvas that are not continuous. E.g. Sharp corners | ||
// or stopping mid-stroke and than continuing without lifting mouse. | ||
if (!isNaN(curve.control1.x) && !isNaN(curve.control1.y) && !isNaN(curve.control2.x) && !isNaN(curve.control2.y)) { | ||
var attr = 'M ' + curve.startPoint.x.toFixed(3) + ',' + curve.startPoint.y.toFixed(3) + ' ' + ('C ' + curve.control1.x.toFixed(3) + ',' + curve.control1.y.toFixed(3) + ' ') + (curve.control2.x.toFixed(3) + ',' + curve.control2.y.toFixed(3) + ' ') + (curve.endPoint.x.toFixed(3) + ',' + curve.endPoint.y.toFixed(3)); | ||
// Need to check curve for NaN values, these pop up when drawing | ||
// lines on the canvas that are not continuous. E.g. Sharp corners | ||
// or stopping mid-stroke and than continuing without lifting mouse. | ||
if (!isNaN(curve.control1.x) && !isNaN(curve.control1.y) && !isNaN(curve.control2.x) && !isNaN(curve.control2.y)) { | ||
var attr = 'M ' + curve.startPoint.x.toFixed(3) + ',' + curve.startPoint.y.toFixed(3) + ' ' + ('C ' + curve.control1.x.toFixed(3) + ',' + curve.control1.y.toFixed(3) + ' ') + (curve.control2.x.toFixed(3) + ',' + curve.control2.y.toFixed(3) + ' ') + (curve.endPoint.x.toFixed(3) + ',' + curve.endPoint.y.toFixed(3)); | ||
path.setAttribute('d', attr); | ||
path.setAttributeNS(null, 'stroke-width', (widths.end * 2.25).toFixed(3)); | ||
path.setAttributeNS(null, 'stroke', _this2.penColor); | ||
path.setAttributeNS(null, 'fill', 'none'); | ||
path.setAttributeNS(null, 'stroke-linecap', 'round'); | ||
path.setAttribute('d', attr); | ||
path.setAttributeNS(null, 'stroke-width', (widths.end * 2.25).toFixed(3)); | ||
path.setAttributeNS(null, 'stroke', _this2.penColor); | ||
path.setAttributeNS(null, 'fill', 'none'); | ||
path.setAttributeNS(null, 'stroke-linecap', 'round'); | ||
svg.appendChild(path); | ||
} | ||
}, function (rawPoint) { | ||
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); | ||
var dotSize = typeof _this2.dotSize === 'function' ? _this2.dotSize() : _this2.dotSize; | ||
circle.setAttributeNS(null, 'r', dotSize); | ||
circle.setAttributeNS(null, 'cx', rawPoint.x); | ||
circle.setAttributeNS(null, 'cy', rawPoint.y); | ||
circle.setAttributeNS(null, 'fill', _this2.penColor); | ||
svg.appendChild(path); | ||
} | ||
}, function (rawPoint) { | ||
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); | ||
var dotSize = typeof _this2.dotSize === 'function' ? _this2.dotSize() : _this2.dotSize; | ||
circle.setAttributeNS(null, 'r', dotSize); | ||
circle.setAttributeNS(null, 'cx', rawPoint.x); | ||
circle.setAttributeNS(null, 'cy', rawPoint.y); | ||
circle.setAttributeNS(null, 'fill', _this2.penColor); | ||
svg.appendChild(circle); | ||
}); | ||
svg.appendChild(circle); | ||
}); | ||
var prefix = 'data:image/svg+xml;base64,'; | ||
var header = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="' + minX + ' ' + minY + ' ' + maxX + ' ' + maxY + '">'; | ||
var body = svg.innerHTML; | ||
var footer = '</svg>'; | ||
var data = header + body + footer; | ||
var prefix = 'data:image/svg+xml;base64,'; | ||
var header = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="' + minX + ' ' + minY + ' ' + maxX + ' ' + maxY + '">'; | ||
var body = svg.innerHTML; | ||
var footer = '</svg>'; | ||
var data = header + body + footer; | ||
return prefix + btoa(data); | ||
}; | ||
return prefix + btoa(data); | ||
}; | ||
SignaturePad.prototype.fromData = function (pointGroups) { | ||
var _this3 = this; | ||
SignaturePad.prototype.fromData = function (pointGroups) { | ||
var _this3 = this; | ||
this.clear(); | ||
this.clear(); | ||
this._fromData(pointGroups, function (curve, widths) { | ||
return _this3._drawCurve(curve, widths.start, widths.end); | ||
}, function (rawPoint) { | ||
return _this3._drawDot(rawPoint); | ||
}); | ||
}; | ||
this._fromData(pointGroups, function (curve, widths) { | ||
return _this3._drawCurve(curve, widths.start, widths.end); | ||
}, function (rawPoint) { | ||
return _this3._drawDot(rawPoint); | ||
}); | ||
}; | ||
SignaturePad.prototype.toData = function () { | ||
return this._data; | ||
}; | ||
SignaturePad.prototype.toData = function () { | ||
return this._data; | ||
}; | ||
exports.default = SignaturePad; | ||
}); | ||
return SignaturePad; | ||
}))); |
@@ -1,5 +0,1 @@ | ||
/*! | ||
* Signature Pad v1.6.0-beta.4 | https://github.com/szimek/signature_pad | ||
* (c) 2017 Szymon Nowak | Released under the MIT license | ||
*/ | ||
!function(a,b){if("function"==typeof define&&define.amd)define(["exports"],b);else if("undefined"!=typeof exports)b(exports);else{var c={exports:{}};b(c.exports),a.SignaturePad=c.exports}}(this,function(a){"use strict";function b(a,b,c){this.x=a,this.y=b,this.time=c||(new Date).getTime()}function c(a,b,c,d){this.startPoint=a,this.control1=b,this.control2=c,this.endPoint=d}function d(a,b){var c=this,d=b||{};this.velocityFilterWeight=d.velocityFilterWeight||.7,this.minWidth=d.minWidth||.5,this.maxWidth=d.maxWidth||2.5,this.dotSize=d.dotSize||function(){return(this.minWidth+this.maxWidth)/2},this.penColor=d.penColor||"black",this.backgroundColor=d.backgroundColor||"rgba(0,0,0,0)",this.onBegin=d.onBegin,this.onEnd=d.onEnd,this._canvas=a,this._ctx=a.getContext("2d"),this.clear(),this._handleMouseDown=function(a){1===a.which&&(c._mouseButtonDown=!0,c._strokeBegin(a))},this._handleMouseMove=function(a){c._mouseButtonDown&&c._strokeUpdate(a)},this._handleMouseUp=function(a){1===a.which&&c._mouseButtonDown&&(c._mouseButtonDown=!1,c._strokeEnd(a))},this._handleTouchStart=function(a){if(1===a.targetTouches.length){var b=a.changedTouches[0];c._strokeBegin(b)}},this._handleTouchMove=function(a){a.preventDefault();var b=a.targetTouches[0];c._strokeUpdate(b)},this._handleTouchEnd=function(a){var b=a.target===c._canvas;b&&(a.preventDefault(),c._strokeEnd(a))},this.on()}Object.defineProperty(a,"__esModule",{value:!0}),b.prototype.velocityFrom=function(a){return this.time!==a.time?this.distanceTo(a)/(this.time-a.time):1},b.prototype.distanceTo=function(a){return Math.sqrt(Math.pow(this.x-a.x,2)+Math.pow(this.y-a.y,2))},c.prototype.length=function(){for(var a=10,b=0,c=void 0,d=void 0,e=0;e<=a;e+=1){var f=e/a,g=this._point(f,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),h=this._point(f,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(e>0){var i=g-c,j=h-d;b+=Math.sqrt(i*i+j*j)}c=g,d=h}return b},c.prototype._point=function(a,b,c,d,e){return b*(1-a)*(1-a)*(1-a)+3*c*(1-a)*(1-a)*a+3*d*(1-a)*a*a+e*a*a*a},d.prototype.clear=function(){var a=this._ctx,b=this._canvas;a.fillStyle=this.backgroundColor,a.clearRect(0,0,b.width,b.height),a.fillRect(0,0,b.width,b.height),this._data=[],this._reset(),this._isEmpty=!0},d.prototype.fromDataURL=function(a){var b=this,c=new Image,d=window.devicePixelRatio||1,e=this._canvas.width/d,f=this._canvas.height/d;this._reset(),c.src=a,c.onload=function(){b._ctx.drawImage(c,0,0,e,f)},this._isEmpty=!1},d.prototype.toDataURL=function(a){var b;switch(a){case"image/svg+xml":return this._toSVG();default:for(var c=arguments.length,d=Array(c>1?c-1:0),e=1;e<c;e++)d[e-1]=arguments[e];return(b=this._canvas).toDataURL.apply(b,[a].concat(d))}},d.prototype.on=function(){this._handleMouseEvents(),this._handleTouchEvents()},d.prototype.off=function(){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)},d.prototype.isEmpty=function(){return this._isEmpty},d.prototype._strokeBegin=function(a){this._data.push([]),this._reset(),this._strokeUpdate(a),"function"==typeof this.onBegin&&this.onBegin(a)},d.prototype._strokeUpdate=function(a){var b=a.clientX,c=a.clientY,d=this._createPoint(b,c),e=this._addPoint(d),f=e.curve,g=e.widths;f&&g&&this._drawCurve(f,g.start,g.end),this._data[this._data.length-1].push({x:d.x,y:d.y,time:d.time})},d.prototype._strokeEnd=function(a){var b=this.points.length>2,c=this.points[0];!b&&c&&this._drawDot(c),"function"==typeof this.onEnd&&this.onEnd(a)},d.prototype._handleMouseEvents=function(){this._mouseButtonDown=!1,this._canvas.addEventListener("mousedown",this._handleMouseDown),this._canvas.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)},d.prototype._handleTouchEvents=function(){this._canvas.style.msTouchAction="none",this._canvas.style.touchAction="none",this._canvas.addEventListener("touchstart",this._handleTouchStart),this._canvas.addEventListener("touchmove",this._handleTouchMove),this._canvas.addEventListener("touchend",this._handleTouchEnd)},d.prototype._reset=function(){this.points=[],this._lastVelocity=0,this._lastWidth=(this.minWidth+this.maxWidth)/2,this._ctx.fillStyle=this.penColor},d.prototype._createPoint=function(a,c,d){var e=this._canvas.getBoundingClientRect();return new b(a-e.left,c-e.top,d||(new Date).getTime())},d.prototype._addPoint=function(a){var b=this.points,d=void 0;if(b.push(a),b.length>2){3===b.length&&b.unshift(b[0]),d=this._calculateCurveControlPoints(b[0],b[1],b[2]);var e=d.c2;d=this._calculateCurveControlPoints(b[1],b[2],b[3]);var f=d.c1,g=new c(b[1],e,f,b[2]),h=this._calculateCurveWidths(g);return b.shift(),{curve:g,widths:h}}return{}},d.prototype._calculateCurveControlPoints=function(a,c,d){var e=a.x-c.x,f=a.y-c.y,g=c.x-d.x,h=c.y-d.y,i={x:(a.x+c.x)/2,y:(a.y+c.y)/2},j={x:(c.x+d.x)/2,y:(c.y+d.y)/2},k=Math.sqrt(e*e+f*f),l=Math.sqrt(g*g+h*h),m=i.x-j.x,n=i.y-j.y,o=l/(k+l),p={x:j.x+m*o,y:j.y+n*o},q=c.x-p.x,r=c.y-p.y;return{c1:new b(i.x+q,i.y+r),c2:new b(j.x+q,j.y+r)}},d.prototype._calculateCurveWidths=function(a){var b=a.startPoint,c=a.endPoint,d={start:null,end:null},e=this.velocityFilterWeight*c.velocityFrom(b)+(1-this.velocityFilterWeight)*this._lastVelocity,f=this._strokeWidth(e);return d.start=this._lastWidth,d.end=f,this._lastVelocity=e,this._lastWidth=f,d},d.prototype._strokeWidth=function(a){return Math.max(this.maxWidth/(a+1),this.minWidth)},d.prototype._drawPoint=function(a,b,c){var d=this._ctx;d.moveTo(a,b),d.arc(a,b,c,0,2*Math.PI,!1),this._isEmpty=!1},d.prototype._drawCurve=function(a,b,c){var d=this._ctx,e=c-b,f=Math.floor(a.length());d.beginPath();for(var g=0;g<f;g+=1){var h=g/f,i=h*h,j=i*h,k=1-h,l=k*k,m=l*k,n=m*a.startPoint.x;n+=3*l*h*a.control1.x,n+=3*k*i*a.control2.x,n+=j*a.endPoint.x;var o=m*a.startPoint.y;o+=3*l*h*a.control1.y,o+=3*k*i*a.control2.y,o+=j*a.endPoint.y;var p=b+j*e;this._drawPoint(n,o,p)}d.closePath(),d.fill()},d.prototype._drawDot=function(a){var b=this._ctx,c="function"==typeof this.dotSize?this.dotSize():this.dotSize;b.beginPath(),this._drawPoint(a.x,a.y,c),b.closePath(),b.fill()},d.prototype._fromData=function(a,c,d){for(var e=0;e<a.length;e+=1){var f=a[e];if(f.length>1)for(var g=0;g<f.length;g+=1){var h=f[g],i=new b(h.x,h.y,h.time);if(0===g)this._reset(),this._addPoint(i);else if(g!==f.length-1){var j=this._addPoint(i),k=j.curve,l=j.widths;k&&l&&c(k,l)}}else{this._reset();var m=f[0];d(m)}}},d.prototype._toSVG=function(){var a=this,b=this._data,c=this._canvas,d=0,e=0,f=c.width,g=c.height,h=document.createElementNS("http://www.w3.org/2000/svg","svg");h.setAttributeNS(null,"width",c.width),h.setAttributeNS(null,"height",c.height),this._fromData(b,function(b,c){var d=document.createElementNS("http;//www.w3.org/2000/svg","path");if(!(isNaN(b.control1.x)||isNaN(b.control1.y)||isNaN(b.control2.x)||isNaN(b.control2.y))){var e="M "+b.startPoint.x.toFixed(3)+","+b.startPoint.y.toFixed(3)+" "+("C "+b.control1.x.toFixed(3)+","+b.control1.y.toFixed(3)+" ")+(b.control2.x.toFixed(3)+","+b.control2.y.toFixed(3)+" ")+(b.endPoint.x.toFixed(3)+","+b.endPoint.y.toFixed(3));d.setAttribute("d",e),d.setAttributeNS(null,"stroke-width",(2.25*c.end).toFixed(3)),d.setAttributeNS(null,"stroke",a.penColor),d.setAttributeNS(null,"fill","none"),d.setAttributeNS(null,"stroke-linecap","round"),h.appendChild(d)}},function(b){var c=document.createElementNS("http://www.w3.org/2000/svg","circle"),d="function"==typeof a.dotSize?a.dotSize():a.dotSize;c.setAttributeNS(null,"r",d),c.setAttributeNS(null,"cx",b.x),c.setAttributeNS(null,"cy",b.y),c.setAttributeNS(null,"fill",a.penColor),h.appendChild(c)});var i="data:image/svg+xml;base64,",j='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="'+d+" "+e+" "+f+" "+g+'">',k=h.innerHTML,l="</svg>",m=j+k+l;return i+btoa(m)},d.prototype.fromData=function(a){var b=this;this.clear(),this._fromData(a,function(a,c){return b._drawCurve(a,c.start,c.end)},function(a){return b._drawDot(a)})},d.prototype.toData=function(){return this._data},a.default=d}); | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.SignaturePad=e()}(this,function(){"use strict";function t(t,e,i){this.x=t,this.y=e,this.time=i||(new Date).getTime()}function e(t,e,i,o){this.startPoint=t,this.control1=e,this.control2=i,this.endPoint=o}function i(t,e){var i=this,o=e||{};this.velocityFilterWeight=o.velocityFilterWeight||.7,this.minWidth=o.minWidth||.5,this.maxWidth=o.maxWidth||2.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.onBegin=o.onBegin,this.onEnd=o.onEnd,this._canvas=t,this._ctx=t.getContext("2d"),this.clear(),this._handleMouseDown=function(t){1===t.which&&(i._mouseButtonDown=!0,i._strokeBegin(t))},this._handleMouseMove=function(t){i._mouseButtonDown&&i._strokeUpdate(t)},this._handleMouseUp=function(t){1===t.which&&i._mouseButtonDown&&(i._mouseButtonDown=!1,i._strokeEnd(t))},this._handleTouchStart=function(t){if(1===t.targetTouches.length){var e=t.changedTouches[0];i._strokeBegin(e)}},this._handleTouchMove=function(t){t.preventDefault();var e=t.targetTouches[0];i._strokeUpdate(e)},this._handleTouchEnd=function(t){var e=t.target===i._canvas;e&&(t.preventDefault(),i._strokeEnd(t))},this.on()}return t.prototype.velocityFrom=function(t){return this.time!==t.time?this.distanceTo(t)/(this.time-t.time):1},t.prototype.distanceTo=function(t){return Math.sqrt(Math.pow(this.x-t.x,2)+Math.pow(this.y-t.y,2))},e.prototype.length=function(){for(var t=10,e=0,i=void 0,o=void 0,n=0;n<=t;n+=1){var s=n/t,r=this._point(s,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),h=this._point(s,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(n>0){var a=r-i,c=h-o;e+=Math.sqrt(a*a+c*c)}i=r,o=h}return e},e.prototype._point=function(t,e,i,o,n){return e*(1-t)*(1-t)*(1-t)+3*i*(1-t)*(1-t)*t+3*o*(1-t)*t*t+n*t*t*t},i.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},i.prototype.fromDataURL=function(t){var e=this,i=new Image,o=window.devicePixelRatio||1,n=this._canvas.width/o,s=this._canvas.height/o;this._reset(),i.src=t,i.onload=function(){e._ctx.drawImage(i,0,0,n,s)},this._isEmpty=!1},i.prototype.toDataURL=function(t){var e;switch(t){case"image/svg+xml":return this._toSVG();default:for(var i=arguments.length,o=Array(i>1?i-1:0),n=1;n<i;n++)o[n-1]=arguments[n];return(e=this._canvas).toDataURL.apply(e,[t].concat(o))}},i.prototype.on=function(){this._handleMouseEvents(),this._handleTouchEvents()},i.prototype.off=function(){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)},i.prototype.isEmpty=function(){return this._isEmpty},i.prototype._strokeBegin=function(t){this._data.push([]),this._reset(),this._strokeUpdate(t),"function"==typeof this.onBegin&&this.onBegin(t)},i.prototype._strokeUpdate=function(t){var e=t.clientX,i=t.clientY,o=this._createPoint(e,i),n=this._addPoint(o),s=n.curve,r=n.widths;s&&r&&this._drawCurve(s,r.start,r.end),this._data[this._data.length-1].push({x:o.x,y:o.y,time:o.time})},i.prototype._strokeEnd=function(t){var e=this.points.length>2,i=this.points[0];!e&&i&&this._drawDot(i),"function"==typeof this.onEnd&&this.onEnd(t)},i.prototype._handleMouseEvents=function(){this._mouseButtonDown=!1,this._canvas.addEventListener("mousedown",this._handleMouseDown),this._canvas.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)},i.prototype._handleTouchEvents=function(){this._canvas.style.msTouchAction="none",this._canvas.style.touchAction="none",this._canvas.addEventListener("touchstart",this._handleTouchStart),this._canvas.addEventListener("touchmove",this._handleTouchMove),this._canvas.addEventListener("touchend",this._handleTouchEnd)},i.prototype._reset=function(){this.points=[],this._lastVelocity=0,this._lastWidth=(this.minWidth+this.maxWidth)/2,this._ctx.fillStyle=this.penColor},i.prototype._createPoint=function(e,i,o){var n=this._canvas.getBoundingClientRect();return new t(e-n.left,i-n.top,o||(new Date).getTime())},i.prototype._addPoint=function(t){var i=this.points,o=void 0;if(i.push(t),i.length>2){3===i.length&&i.unshift(i[0]),o=this._calculateCurveControlPoints(i[0],i[1],i[2]);var n=o.c2;o=this._calculateCurveControlPoints(i[1],i[2],i[3]);var s=o.c1,r=new e(i[1],n,s,i[2]),h=this._calculateCurveWidths(r);return i.shift(),{curve:r,widths:h}}return{}},i.prototype._calculateCurveControlPoints=function(e,i,o){var n=e.x-i.x,s=e.y-i.y,r=i.x-o.x,h=i.y-o.y,a={x:(e.x+i.x)/2,y:(e.y+i.y)/2},c={x:(i.x+o.x)/2,y:(i.y+o.y)/2},u=Math.sqrt(n*n+s*s),d=Math.sqrt(r*r+h*h),l=a.x-c.x,v=a.y-c.y,_=d/(u+d),p={x:c.x+l*_,y:c.y+v*_},y=i.x-p.x,f=i.y-p.y;return{c1:new t(a.x+y,a.y+f),c2:new t(c.x+y,c.y+f)}},i.prototype._calculateCurveWidths=function(t){var e=t.startPoint,i=t.endPoint,o={start:null,end:null},n=this.velocityFilterWeight*i.velocityFrom(e)+(1-this.velocityFilterWeight)*this._lastVelocity,s=this._strokeWidth(n);return o.start=this._lastWidth,o.end=s,this._lastVelocity=n,this._lastWidth=s,o},i.prototype._strokeWidth=function(t){return Math.max(this.maxWidth/(t+1),this.minWidth)},i.prototype._drawPoint=function(t,e,i){var o=this._ctx;o.moveTo(t,e),o.arc(t,e,i,0,2*Math.PI,!1),this._isEmpty=!1},i.prototype._drawCurve=function(t,e,i){var o=this._ctx,n=i-e,s=Math.floor(t.length());o.beginPath();for(var r=0;r<s;r+=1){var h=r/s,a=h*h,c=a*h,u=1-h,d=u*u,l=d*u,v=l*t.startPoint.x;v+=3*d*h*t.control1.x,v+=3*u*a*t.control2.x,v+=c*t.endPoint.x;var _=l*t.startPoint.y;_+=3*d*h*t.control1.y,_+=3*u*a*t.control2.y,_+=c*t.endPoint.y;var p=e+c*n;this._drawPoint(v,_,p)}o.closePath(),o.fill()},i.prototype._drawDot=function(t){var e=this._ctx,i="function"==typeof this.dotSize?this.dotSize():this.dotSize;e.beginPath(),this._drawPoint(t.x,t.y,i),e.closePath(),e.fill()},i.prototype._fromData=function(e,i,o){for(var n=0;n<e.length;n+=1){var s=e[n];if(s.length>1)for(var r=0;r<s.length;r+=1){var h=s[r],a=new t(h.x,h.y,h.time);if(0===r)this._reset(),this._addPoint(a);else if(r!==s.length-1){var c=this._addPoint(a),u=c.curve,d=c.widths;u&&d&&i(u,d)}}else{this._reset();var l=s[0];o(l)}}},i.prototype._toSVG=function(){var t=this,e=this._data,i=this._canvas,o=0,n=0,s=i.width,r=i.height,h=document.createElementNS("http://www.w3.org/2000/svg","svg");h.setAttributeNS(null,"width",i.width),h.setAttributeNS(null,"height",i.height),this._fromData(e,function(e,i){var o=document.createElementNS("http;//www.w3.org/2000/svg","path");if(!(isNaN(e.control1.x)||isNaN(e.control1.y)||isNaN(e.control2.x)||isNaN(e.control2.y))){var n="M "+e.startPoint.x.toFixed(3)+","+e.startPoint.y.toFixed(3)+" "+("C "+e.control1.x.toFixed(3)+","+e.control1.y.toFixed(3)+" ")+(e.control2.x.toFixed(3)+","+e.control2.y.toFixed(3)+" ")+(e.endPoint.x.toFixed(3)+","+e.endPoint.y.toFixed(3));o.setAttribute("d",n),o.setAttributeNS(null,"stroke-width",(2.25*i.end).toFixed(3)),o.setAttributeNS(null,"stroke",t.penColor),o.setAttributeNS(null,"fill","none"),o.setAttributeNS(null,"stroke-linecap","round"),h.appendChild(o)}},function(e){var i=document.createElementNS("http://www.w3.org/2000/svg","circle"),o="function"==typeof t.dotSize?t.dotSize():t.dotSize;i.setAttributeNS(null,"r",o),i.setAttributeNS(null,"cx",e.x),i.setAttributeNS(null,"cy",e.y),i.setAttributeNS(null,"fill",t.penColor),h.appendChild(i)});var a="data:image/svg+xml;base64,",c='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="'+o+" "+n+" "+s+" "+r+'">',u=h.innerHTML,d="</svg>",l=c+u+d;return a+btoa(l)},i.prototype.fromData=function(t){var e=this;this.clear(),this._fromData(t,function(t,i){return e._drawCurve(t,i.start,i.end)},function(t){return e._drawDot(t)})},i.prototype.toData=function(){return this._data},i}); |
/*! | ||
* Signature Pad v1.6.0-beta.4 | ||
* Signature Pad v1.6.0-beta.5 | ||
* https://github.com/szimek/signature_pad | ||
@@ -18,508 +18,498 @@ * | ||
*/ | ||
(function (global, factory) { | ||
if (typeof define === "function" && define.amd) { | ||
define(['exports'], factory); | ||
} else if (typeof exports !== "undefined") { | ||
factory(exports); | ||
} else { | ||
var mod = { | ||
exports: {} | ||
}; | ||
factory(mod.exports); | ||
global.SignaturePad = mod.exports; | ||
} | ||
})(this, function (exports) { | ||
'use strict'; | ||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
typeof define === 'function' && define.amd ? define(factory) : | ||
(global.SignaturePad = factory()); | ||
}(this, (function () { 'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
function Point(x, y, time) { | ||
this.x = x; | ||
this.y = y; | ||
this.time = time || new Date().getTime(); | ||
} | ||
function Point(x, y, time) { | ||
this.x = x; | ||
this.y = y; | ||
this.time = time || new Date().getTime(); | ||
} | ||
Point.prototype.velocityFrom = function (start) { | ||
return this.time !== start.time ? this.distanceTo(start) / (this.time - start.time) : 1; | ||
}; | ||
Point.prototype.velocityFrom = function (start) { | ||
return this.time !== start.time ? this.distanceTo(start) / (this.time - start.time) : 1; | ||
}; | ||
Point.prototype.distanceTo = function (start) { | ||
return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2)); | ||
}; | ||
Point.prototype.distanceTo = function (start) { | ||
return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2)); | ||
}; | ||
function Bezier(startPoint, control1, control2, endPoint) { | ||
this.startPoint = startPoint; | ||
this.control1 = control1; | ||
this.control2 = control2; | ||
this.endPoint = endPoint; | ||
} | ||
function Bezier(startPoint, control1, control2, endPoint) { | ||
this.startPoint = startPoint; | ||
this.control1 = control1; | ||
this.control2 = control2; | ||
this.endPoint = endPoint; | ||
} | ||
// Returns approximated length. | ||
Bezier.prototype.length = function () { | ||
var steps = 10; | ||
var length = 0; | ||
var px = void 0; | ||
var py = void 0; | ||
// Returns approximated length. | ||
Bezier.prototype.length = function () { | ||
var steps = 10; | ||
var length = 0; | ||
var px = void 0; | ||
var py = void 0; | ||
for (var i = 0; i <= steps; i += 1) { | ||
var t = i / steps; | ||
var cx = this._point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x); | ||
var cy = this._point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y); | ||
if (i > 0) { | ||
var xdiff = cx - px; | ||
var ydiff = cy - py; | ||
length += Math.sqrt(xdiff * xdiff + ydiff * ydiff); | ||
} | ||
px = cx; | ||
py = cy; | ||
for (var i = 0; i <= steps; i += 1) { | ||
var t = i / steps; | ||
var cx = this._point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x); | ||
var cy = this._point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y); | ||
if (i > 0) { | ||
var xdiff = cx - px; | ||
var ydiff = cy - py; | ||
length += Math.sqrt(xdiff * xdiff + ydiff * ydiff); | ||
} | ||
px = cx; | ||
py = cy; | ||
} | ||
return length; | ||
}; | ||
return length; | ||
}; | ||
/* eslint-disable no-multi-spaces, space-in-parens */ | ||
Bezier.prototype._point = function (t, start, c1, c2, end) { | ||
return start * (1.0 - t) * (1.0 - t) * (1.0 - t) + 3.0 * c1 * (1.0 - t) * (1.0 - t) * t + 3.0 * c2 * (1.0 - t) * t * t + end * t * t * t; | ||
/* eslint-disable no-multi-spaces, space-in-parens */ | ||
Bezier.prototype._point = function (t, start, c1, c2, end) { | ||
return start * (1.0 - t) * (1.0 - t) * (1.0 - t) + 3.0 * c1 * (1.0 - t) * (1.0 - t) * t + 3.0 * c2 * (1.0 - t) * t * t + end * t * t * t; | ||
}; | ||
function SignaturePad(canvas, options) { | ||
var self = this; | ||
var opts = options || {}; | ||
this.velocityFilterWeight = opts.velocityFilterWeight || 0.7; | ||
this.minWidth = opts.minWidth || 0.5; | ||
this.maxWidth = opts.maxWidth || 2.5; | ||
this.dotSize = opts.dotSize || function () { | ||
return (this.minWidth + this.maxWidth) / 2; | ||
}; | ||
/* eslint-enable no-multi-spaces, space-in-parens */ | ||
this.penColor = opts.penColor || 'black'; | ||
this.backgroundColor = opts.backgroundColor || 'rgba(0,0,0,0)'; | ||
this.onBegin = opts.onBegin; | ||
this.onEnd = opts.onEnd; | ||
function SignaturePad(canvas, options) { | ||
var self = this; | ||
var opts = options || {}; | ||
this._canvas = canvas; | ||
this._ctx = canvas.getContext('2d'); | ||
this.clear(); | ||
this.velocityFilterWeight = opts.velocityFilterWeight || 0.7; | ||
this.minWidth = opts.minWidth || 0.5; | ||
this.maxWidth = opts.maxWidth || 2.5; | ||
this.dotSize = opts.dotSize || function () { | ||
return (this.minWidth + this.maxWidth) / 2; | ||
}; | ||
this.penColor = opts.penColor || 'black'; | ||
this.backgroundColor = opts.backgroundColor || 'rgba(0,0,0,0)'; | ||
this.onBegin = opts.onBegin; | ||
this.onEnd = opts.onEnd; | ||
// We need add these inline so they are available to unbind while still having | ||
// access to 'self' we could use _.bind but it's not worth adding a dependency. | ||
this._handleMouseDown = function (event) { | ||
if (event.which === 1) { | ||
self._mouseButtonDown = true; | ||
self._strokeBegin(event); | ||
} | ||
}; | ||
this._canvas = canvas; | ||
this._ctx = canvas.getContext('2d'); | ||
this.clear(); | ||
this._handleMouseMove = function (event) { | ||
if (self._mouseButtonDown) { | ||
self._strokeUpdate(event); | ||
} | ||
}; | ||
// We need add these inline so they are available to unbind while still having | ||
// access to 'self' we could use _.bind but it's not worth adding a dependency. | ||
this._handleMouseDown = function (event) { | ||
if (event.which === 1) { | ||
self._mouseButtonDown = true; | ||
self._strokeBegin(event); | ||
} | ||
}; | ||
this._handleMouseUp = function (event) { | ||
if (event.which === 1 && self._mouseButtonDown) { | ||
self._mouseButtonDown = false; | ||
self._strokeEnd(event); | ||
} | ||
}; | ||
this._handleMouseMove = function (event) { | ||
if (self._mouseButtonDown) { | ||
self._strokeUpdate(event); | ||
} | ||
}; | ||
this._handleTouchStart = function (event) { | ||
if (event.targetTouches.length === 1) { | ||
var touch = event.changedTouches[0]; | ||
self._strokeBegin(touch); | ||
} | ||
}; | ||
this._handleMouseUp = function (event) { | ||
if (event.which === 1 && self._mouseButtonDown) { | ||
self._mouseButtonDown = false; | ||
self._strokeEnd(event); | ||
} | ||
}; | ||
this._handleTouchMove = function (event) { | ||
// Prevent scrolling. | ||
event.preventDefault(); | ||
this._handleTouchStart = function (event) { | ||
if (event.targetTouches.length === 1) { | ||
var touch = event.changedTouches[0]; | ||
self._strokeBegin(touch); | ||
} | ||
}; | ||
var touch = event.targetTouches[0]; | ||
self._strokeUpdate(touch); | ||
}; | ||
this._handleTouchMove = function (event) { | ||
// Prevent scrolling. | ||
this._handleTouchEnd = function (event) { | ||
var wasCanvasTouched = event.target === self._canvas; | ||
if (wasCanvasTouched) { | ||
event.preventDefault(); | ||
self._strokeEnd(event); | ||
} | ||
}; | ||
var touch = event.targetTouches[0]; | ||
self._strokeUpdate(touch); | ||
}; | ||
// Enable mouse and touch event handlers | ||
this.on(); | ||
} | ||
this._handleTouchEnd = function (event) { | ||
var wasCanvasTouched = event.target === self._canvas; | ||
if (wasCanvasTouched) { | ||
event.preventDefault(); | ||
self._strokeEnd(event); | ||
} | ||
}; | ||
// Public methods | ||
SignaturePad.prototype.clear = function () { | ||
var ctx = this._ctx; | ||
var canvas = this._canvas; | ||
// Enable mouse and touch event handlers | ||
this.on(); | ||
} | ||
ctx.fillStyle = this.backgroundColor; | ||
ctx.clearRect(0, 0, canvas.width, canvas.height); | ||
ctx.fillRect(0, 0, canvas.width, canvas.height); | ||
// Public methods | ||
SignaturePad.prototype.clear = function () { | ||
var ctx = this._ctx; | ||
var canvas = this._canvas; | ||
this._data = []; | ||
this._reset(); | ||
this._isEmpty = true; | ||
}; | ||
ctx.fillStyle = this.backgroundColor; | ||
ctx.clearRect(0, 0, canvas.width, canvas.height); | ||
ctx.fillRect(0, 0, canvas.width, canvas.height); | ||
SignaturePad.prototype.fromDataURL = function (dataUrl) { | ||
var _this = this; | ||
this._data = []; | ||
this._reset(); | ||
this._isEmpty = true; | ||
}; | ||
var image = new Image(); | ||
var ratio = window.devicePixelRatio || 1; | ||
var width = this._canvas.width / ratio; | ||
var height = this._canvas.height / ratio; | ||
SignaturePad.prototype.fromDataURL = function (dataUrl) { | ||
var _this = this; | ||
var image = new Image(); | ||
var ratio = window.devicePixelRatio || 1; | ||
var width = this._canvas.width / ratio; | ||
var height = this._canvas.height / ratio; | ||
this._reset(); | ||
image.src = dataUrl; | ||
image.onload = function () { | ||
_this._ctx.drawImage(image, 0, 0, width, height); | ||
}; | ||
this._isEmpty = false; | ||
this._reset(); | ||
image.src = dataUrl; | ||
image.onload = function () { | ||
_this._ctx.drawImage(image, 0, 0, width, height); | ||
}; | ||
this._isEmpty = false; | ||
}; | ||
SignaturePad.prototype.toDataURL = function (type) { | ||
var _canvas; | ||
SignaturePad.prototype.toDataURL = function (type) { | ||
var _canvas; | ||
switch (type) { | ||
case 'image/svg+xml': | ||
return this._toSVG(); | ||
default: | ||
for (var _len = arguments.length, options = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
options[_key - 1] = arguments[_key]; | ||
} | ||
switch (type) { | ||
case 'image/svg+xml': | ||
return this._toSVG(); | ||
default: | ||
for (var _len = arguments.length, options = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
options[_key - 1] = arguments[_key]; | ||
} | ||
return (_canvas = this._canvas).toDataURL.apply(_canvas, [type].concat(options)); | ||
} | ||
}; | ||
return (_canvas = this._canvas).toDataURL.apply(_canvas, [type].concat(options)); | ||
} | ||
}; | ||
SignaturePad.prototype.on = function () { | ||
this._handleMouseEvents(); | ||
this._handleTouchEvents(); | ||
}; | ||
SignaturePad.prototype.on = function () { | ||
this._handleMouseEvents(); | ||
this._handleTouchEvents(); | ||
}; | ||
SignaturePad.prototype.off = function () { | ||
this._canvas.removeEventListener('mousedown', this._handleMouseDown); | ||
this._canvas.removeEventListener('mousemove', this._handleMouseMove); | ||
document.removeEventListener('mouseup', this._handleMouseUp); | ||
SignaturePad.prototype.off = function () { | ||
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); | ||
}; | ||
this._canvas.removeEventListener('touchstart', this._handleTouchStart); | ||
this._canvas.removeEventListener('touchmove', this._handleTouchMove); | ||
this._canvas.removeEventListener('touchend', this._handleTouchEnd); | ||
}; | ||
SignaturePad.prototype.isEmpty = function () { | ||
return this._isEmpty; | ||
}; | ||
SignaturePad.prototype.isEmpty = function () { | ||
return this._isEmpty; | ||
}; | ||
// Private methods | ||
SignaturePad.prototype._strokeBegin = function (event) { | ||
this._data.push([]); | ||
this._reset(); | ||
this._strokeUpdate(event); | ||
// Private methods | ||
SignaturePad.prototype._strokeBegin = function (event) { | ||
this._data.push([]); | ||
this._reset(); | ||
this._strokeUpdate(event); | ||
if (typeof this.onBegin === 'function') { | ||
this.onBegin(event); | ||
} | ||
}; | ||
if (typeof this.onBegin === 'function') { | ||
this.onBegin(event); | ||
} | ||
}; | ||
SignaturePad.prototype._strokeUpdate = function (event) { | ||
var x = event.clientX; | ||
var y = event.clientY; | ||
SignaturePad.prototype._strokeUpdate = function (event) { | ||
var x = event.clientX; | ||
var y = event.clientY; | ||
var point = this._createPoint(x, y); | ||
var point = this._createPoint(x, y); | ||
var _addPoint = this._addPoint(point), | ||
curve = _addPoint.curve, | ||
widths = _addPoint.widths; | ||
var _addPoint = this._addPoint(point), | ||
curve = _addPoint.curve, | ||
widths = _addPoint.widths; | ||
if (curve && widths) { | ||
this._drawCurve(curve, widths.start, widths.end); | ||
} | ||
if (curve && widths) { | ||
this._drawCurve(curve, widths.start, widths.end); | ||
} | ||
this._data[this._data.length - 1].push({ | ||
x: point.x, | ||
y: point.y, | ||
time: point.time | ||
}); | ||
}; | ||
this._data[this._data.length - 1].push({ | ||
x: point.x, | ||
y: point.y, | ||
time: point.time | ||
}); | ||
}; | ||
SignaturePad.prototype._strokeEnd = function (event) { | ||
var canDrawCurve = this.points.length > 2; | ||
var point = this.points[0]; | ||
SignaturePad.prototype._strokeEnd = function (event) { | ||
var canDrawCurve = this.points.length > 2; | ||
var point = this.points[0]; | ||
if (!canDrawCurve && point) { | ||
this._drawDot(point); | ||
} | ||
if (!canDrawCurve && point) { | ||
this._drawDot(point); | ||
} | ||
if (typeof this.onEnd === 'function') { | ||
this.onEnd(event); | ||
} | ||
}; | ||
if (typeof this.onEnd === 'function') { | ||
this.onEnd(event); | ||
} | ||
}; | ||
SignaturePad.prototype._handleMouseEvents = function () { | ||
this._mouseButtonDown = false; | ||
SignaturePad.prototype._handleMouseEvents = function () { | ||
this._mouseButtonDown = false; | ||
this._canvas.addEventListener('mousedown', this._handleMouseDown); | ||
this._canvas.addEventListener('mousemove', this._handleMouseMove); | ||
document.addEventListener('mouseup', this._handleMouseUp); | ||
}; | ||
this._canvas.addEventListener('mousedown', this._handleMouseDown); | ||
this._canvas.addEventListener('mousemove', this._handleMouseMove); | ||
document.addEventListener('mouseup', this._handleMouseUp); | ||
}; | ||
SignaturePad.prototype._handleTouchEvents = function () { | ||
// Pass touch events to canvas element on mobile IE11 and Edge. | ||
this._canvas.style.msTouchAction = 'none'; | ||
this._canvas.style.touchAction = 'none'; | ||
SignaturePad.prototype._handleTouchEvents = function () { | ||
// Pass touch events to canvas element on mobile IE11 and Edge. | ||
this._canvas.style.msTouchAction = 'none'; | ||
this._canvas.style.touchAction = 'none'; | ||
this._canvas.addEventListener('touchstart', this._handleTouchStart); | ||
this._canvas.addEventListener('touchmove', this._handleTouchMove); | ||
this._canvas.addEventListener('touchend', this._handleTouchEnd); | ||
}; | ||
this._canvas.addEventListener('touchstart', this._handleTouchStart); | ||
this._canvas.addEventListener('touchmove', this._handleTouchMove); | ||
this._canvas.addEventListener('touchend', this._handleTouchEnd); | ||
}; | ||
SignaturePad.prototype._reset = function () { | ||
this.points = []; | ||
this._lastVelocity = 0; | ||
this._lastWidth = (this.minWidth + this.maxWidth) / 2; | ||
this._ctx.fillStyle = this.penColor; | ||
}; | ||
SignaturePad.prototype._reset = function () { | ||
this.points = []; | ||
this._lastVelocity = 0; | ||
this._lastWidth = (this.minWidth + this.maxWidth) / 2; | ||
this._ctx.fillStyle = this.penColor; | ||
}; | ||
SignaturePad.prototype._createPoint = function (x, y, time) { | ||
var rect = this._canvas.getBoundingClientRect(); | ||
SignaturePad.prototype._createPoint = function (x, y, time) { | ||
var rect = this._canvas.getBoundingClientRect(); | ||
return new Point(x - rect.left, y - rect.top, time || new Date().getTime()); | ||
}; | ||
return new Point(x - rect.left, y - rect.top, time || new Date().getTime()); | ||
}; | ||
SignaturePad.prototype._addPoint = function (point) { | ||
var points = this.points; | ||
var tmp = void 0; | ||
SignaturePad.prototype._addPoint = function (point) { | ||
var points = this.points; | ||
var tmp = void 0; | ||
points.push(point); | ||
points.push(point); | ||
if (points.length > 2) { | ||
// To reduce the initial lag make it work with 3 points | ||
// by copying the first point to the beginning. | ||
if (points.length === 3) points.unshift(points[0]); | ||
if (points.length > 2) { | ||
// To reduce the initial lag make it work with 3 points | ||
// by copying the first point to the beginning. | ||
if (points.length === 3) points.unshift(points[0]); | ||
tmp = this._calculateCurveControlPoints(points[0], points[1], points[2]); | ||
var c2 = tmp.c2; | ||
tmp = this._calculateCurveControlPoints(points[1], points[2], points[3]); | ||
var c3 = tmp.c1; | ||
var curve = new Bezier(points[1], c2, c3, points[2]); | ||
var widths = this._calculateCurveWidths(curve); | ||
tmp = this._calculateCurveControlPoints(points[0], points[1], points[2]); | ||
var c2 = tmp.c2; | ||
tmp = this._calculateCurveControlPoints(points[1], points[2], points[3]); | ||
var c3 = tmp.c1; | ||
var curve = new Bezier(points[1], c2, c3, points[2]); | ||
var widths = this._calculateCurveWidths(curve); | ||
// Remove the first element from the list, | ||
// so that we always have no more than 4 points in points array. | ||
points.shift(); | ||
// Remove the first element from the list, | ||
// so that we always have no more than 4 points in points array. | ||
points.shift(); | ||
return { curve: curve, widths: widths }; | ||
} | ||
return { curve: curve, widths: widths }; | ||
} | ||
return {}; | ||
}; | ||
return {}; | ||
}; | ||
SignaturePad.prototype._calculateCurveControlPoints = function (s1, s2, s3) { | ||
var dx1 = s1.x - s2.x; | ||
var dy1 = s1.y - s2.y; | ||
var dx2 = s2.x - s3.x; | ||
var dy2 = s2.y - s3.y; | ||
SignaturePad.prototype._calculateCurveControlPoints = function (s1, s2, s3) { | ||
var dx1 = s1.x - s2.x; | ||
var dy1 = s1.y - s2.y; | ||
var dx2 = s2.x - s3.x; | ||
var dy2 = s2.y - s3.y; | ||
var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 }; | ||
var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 }; | ||
var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 }; | ||
var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 }; | ||
var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1); | ||
var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2); | ||
var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1); | ||
var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2); | ||
var dxm = m1.x - m2.x; | ||
var dym = m1.y - m2.y; | ||
var dxm = m1.x - m2.x; | ||
var dym = m1.y - m2.y; | ||
var k = l2 / (l1 + l2); | ||
var cm = { x: m2.x + dxm * k, y: m2.y + dym * k }; | ||
var k = l2 / (l1 + l2); | ||
var cm = { x: m2.x + dxm * k, y: m2.y + dym * k }; | ||
var tx = s2.x - cm.x; | ||
var ty = s2.y - cm.y; | ||
var tx = s2.x - cm.x; | ||
var ty = s2.y - cm.y; | ||
return { | ||
c1: new Point(m1.x + tx, m1.y + ty), | ||
c2: new Point(m2.x + tx, m2.y + ty) | ||
}; | ||
return { | ||
c1: new Point(m1.x + tx, m1.y + ty), | ||
c2: new Point(m2.x + tx, m2.y + ty) | ||
}; | ||
}; | ||
SignaturePad.prototype._calculateCurveWidths = function (curve) { | ||
var startPoint = curve.startPoint; | ||
var endPoint = curve.endPoint; | ||
var widths = { start: null, end: null }; | ||
SignaturePad.prototype._calculateCurveWidths = function (curve) { | ||
var startPoint = curve.startPoint; | ||
var endPoint = curve.endPoint; | ||
var widths = { start: null, end: null }; | ||
var velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) + (1 - this.velocityFilterWeight) * this._lastVelocity; | ||
var velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) + (1 - this.velocityFilterWeight) * this._lastVelocity; | ||
var newWidth = this._strokeWidth(velocity); | ||
var newWidth = this._strokeWidth(velocity); | ||
widths.start = this._lastWidth; | ||
widths.end = newWidth; | ||
widths.start = this._lastWidth; | ||
widths.end = newWidth; | ||
this._lastVelocity = velocity; | ||
this._lastWidth = newWidth; | ||
this._lastVelocity = velocity; | ||
this._lastWidth = newWidth; | ||
return widths; | ||
}; | ||
return widths; | ||
}; | ||
SignaturePad.prototype._strokeWidth = function (velocity) { | ||
return Math.max(this.maxWidth / (velocity + 1), this.minWidth); | ||
}; | ||
SignaturePad.prototype._strokeWidth = function (velocity) { | ||
return Math.max(this.maxWidth / (velocity + 1), this.minWidth); | ||
}; | ||
SignaturePad.prototype._drawPoint = function (x, y, size) { | ||
var ctx = this._ctx; | ||
SignaturePad.prototype._drawPoint = function (x, y, size) { | ||
var ctx = this._ctx; | ||
ctx.moveTo(x, y); | ||
ctx.arc(x, y, size, 0, 2 * Math.PI, false); | ||
this._isEmpty = false; | ||
}; | ||
ctx.moveTo(x, y); | ||
ctx.arc(x, y, size, 0, 2 * Math.PI, false); | ||
this._isEmpty = false; | ||
}; | ||
SignaturePad.prototype._drawCurve = function (curve, startWidth, endWidth) { | ||
var ctx = this._ctx; | ||
var widthDelta = endWidth - startWidth; | ||
var drawSteps = Math.floor(curve.length()); | ||
SignaturePad.prototype._drawCurve = function (curve, startWidth, endWidth) { | ||
var ctx = this._ctx; | ||
var widthDelta = endWidth - startWidth; | ||
var drawSteps = Math.floor(curve.length()); | ||
ctx.beginPath(); | ||
ctx.beginPath(); | ||
for (var i = 0; i < drawSteps; i += 1) { | ||
// Calculate the Bezier (x, y) coordinate for this step. | ||
var t = i / drawSteps; | ||
var tt = t * t; | ||
var ttt = tt * t; | ||
var u = 1 - t; | ||
var uu = u * u; | ||
var uuu = uu * u; | ||
for (var i = 0; i < drawSteps; i += 1) { | ||
// Calculate the Bezier (x, y) coordinate for this step. | ||
var t = i / drawSteps; | ||
var tt = t * t; | ||
var ttt = tt * t; | ||
var u = 1 - t; | ||
var uu = u * u; | ||
var uuu = uu * u; | ||
var x = uuu * curve.startPoint.x; | ||
x += 3 * uu * t * curve.control1.x; | ||
x += 3 * u * tt * curve.control2.x; | ||
x += ttt * curve.endPoint.x; | ||
var x = uuu * curve.startPoint.x; | ||
x += 3 * uu * t * curve.control1.x; | ||
x += 3 * u * tt * curve.control2.x; | ||
x += ttt * curve.endPoint.x; | ||
var y = uuu * curve.startPoint.y; | ||
y += 3 * uu * t * curve.control1.y; | ||
y += 3 * u * tt * curve.control2.y; | ||
y += ttt * curve.endPoint.y; | ||
var y = uuu * curve.startPoint.y; | ||
y += 3 * uu * t * curve.control1.y; | ||
y += 3 * u * tt * curve.control2.y; | ||
y += ttt * curve.endPoint.y; | ||
var width = startWidth + ttt * widthDelta; | ||
this._drawPoint(x, y, width); | ||
} | ||
var width = startWidth + ttt * widthDelta; | ||
this._drawPoint(x, y, width); | ||
} | ||
ctx.closePath(); | ||
ctx.fill(); | ||
}; | ||
ctx.closePath(); | ||
ctx.fill(); | ||
}; | ||
SignaturePad.prototype._drawDot = function (point) { | ||
var ctx = this._ctx; | ||
var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize; | ||
SignaturePad.prototype._drawDot = function (point) { | ||
var ctx = this._ctx; | ||
var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize; | ||
ctx.beginPath(); | ||
this._drawPoint(point.x, point.y, width); | ||
ctx.closePath(); | ||
ctx.fill(); | ||
}; | ||
ctx.beginPath(); | ||
this._drawPoint(point.x, point.y, width); | ||
ctx.closePath(); | ||
ctx.fill(); | ||
}; | ||
SignaturePad.prototype._fromData = function (pointGroups, drawCurve, drawDot) { | ||
for (var i = 0; i < pointGroups.length; i += 1) { | ||
var group = pointGroups[i]; | ||
SignaturePad.prototype._fromData = function (pointGroups, drawCurve, drawDot) { | ||
for (var i = 0; i < pointGroups.length; i += 1) { | ||
var group = pointGroups[i]; | ||
if (group.length > 1) { | ||
for (var j = 0; j < group.length; j += 1) { | ||
var rawPoint = group[j]; | ||
var point = new Point(rawPoint.x, rawPoint.y, rawPoint.time); | ||
if (group.length > 1) { | ||
for (var j = 0; j < group.length; j += 1) { | ||
var rawPoint = group[j]; | ||
var point = new Point(rawPoint.x, rawPoint.y, rawPoint.time); | ||
if (j === 0) { | ||
// First point in a group. Nothing to draw yet. | ||
this._reset(); | ||
this._addPoint(point); | ||
} else if (j !== group.length - 1) { | ||
var _addPoint2 = this._addPoint(point), | ||
curve = _addPoint2.curve, | ||
widths = _addPoint2.widths; | ||
if (j === 0) { | ||
// First point in a group. Nothing to draw yet. | ||
this._reset(); | ||
this._addPoint(point); | ||
} else if (j !== group.length - 1) { | ||
// Middle point in a group. | ||
var _addPoint2 = this._addPoint(point), | ||
curve = _addPoint2.curve, | ||
widths = _addPoint2.widths; | ||
if (curve && widths) { | ||
drawCurve(curve, widths); | ||
} | ||
} else { | ||
// Last point in a group. Do nothing. | ||
if (curve && widths) { | ||
drawCurve(curve, widths); | ||
} | ||
} else { | ||
// Last point in a group. Do nothing. | ||
} | ||
} else { | ||
this._reset(); | ||
var _rawPoint = group[0]; | ||
drawDot(_rawPoint); | ||
} | ||
} else { | ||
this._reset(); | ||
var _rawPoint = group[0]; | ||
drawDot(_rawPoint); | ||
} | ||
}; | ||
} | ||
}; | ||
SignaturePad.prototype._toSVG = function () { | ||
var _this2 = this; | ||
SignaturePad.prototype._toSVG = function () { | ||
var _this2 = this; | ||
var pointGroups = this._data; | ||
var canvas = this._canvas; | ||
var minX = 0; | ||
var minY = 0; | ||
var maxX = canvas.width; | ||
var maxY = canvas.height; | ||
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); | ||
var pointGroups = this._data; | ||
var canvas = this._canvas; | ||
var minX = 0; | ||
var minY = 0; | ||
var maxX = canvas.width; | ||
var maxY = canvas.height; | ||
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); | ||
svg.setAttributeNS(null, 'width', canvas.width); | ||
svg.setAttributeNS(null, 'height', canvas.height); | ||
svg.setAttributeNS(null, 'width', canvas.width); | ||
svg.setAttributeNS(null, 'height', canvas.height); | ||
this._fromData(pointGroups, function (curve, widths) { | ||
var path = document.createElementNS('http;//www.w3.org/2000/svg', 'path'); | ||
this._fromData(pointGroups, function (curve, widths) { | ||
var path = document.createElementNS('http;//www.w3.org/2000/svg', 'path'); | ||
// Need to check curve for NaN values, these pop up when drawing | ||
// lines on the canvas that are not continuous. E.g. Sharp corners | ||
// or stopping mid-stroke and than continuing without lifting mouse. | ||
if (!isNaN(curve.control1.x) && !isNaN(curve.control1.y) && !isNaN(curve.control2.x) && !isNaN(curve.control2.y)) { | ||
var attr = 'M ' + curve.startPoint.x.toFixed(3) + ',' + curve.startPoint.y.toFixed(3) + ' ' + ('C ' + curve.control1.x.toFixed(3) + ',' + curve.control1.y.toFixed(3) + ' ') + (curve.control2.x.toFixed(3) + ',' + curve.control2.y.toFixed(3) + ' ') + (curve.endPoint.x.toFixed(3) + ',' + curve.endPoint.y.toFixed(3)); | ||
// Need to check curve for NaN values, these pop up when drawing | ||
// lines on the canvas that are not continuous. E.g. Sharp corners | ||
// or stopping mid-stroke and than continuing without lifting mouse. | ||
if (!isNaN(curve.control1.x) && !isNaN(curve.control1.y) && !isNaN(curve.control2.x) && !isNaN(curve.control2.y)) { | ||
var attr = 'M ' + curve.startPoint.x.toFixed(3) + ',' + curve.startPoint.y.toFixed(3) + ' ' + ('C ' + curve.control1.x.toFixed(3) + ',' + curve.control1.y.toFixed(3) + ' ') + (curve.control2.x.toFixed(3) + ',' + curve.control2.y.toFixed(3) + ' ') + (curve.endPoint.x.toFixed(3) + ',' + curve.endPoint.y.toFixed(3)); | ||
path.setAttribute('d', attr); | ||
path.setAttributeNS(null, 'stroke-width', (widths.end * 2.25).toFixed(3)); | ||
path.setAttributeNS(null, 'stroke', _this2.penColor); | ||
path.setAttributeNS(null, 'fill', 'none'); | ||
path.setAttributeNS(null, 'stroke-linecap', 'round'); | ||
path.setAttribute('d', attr); | ||
path.setAttributeNS(null, 'stroke-width', (widths.end * 2.25).toFixed(3)); | ||
path.setAttributeNS(null, 'stroke', _this2.penColor); | ||
path.setAttributeNS(null, 'fill', 'none'); | ||
path.setAttributeNS(null, 'stroke-linecap', 'round'); | ||
svg.appendChild(path); | ||
} | ||
}, function (rawPoint) { | ||
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); | ||
var dotSize = typeof _this2.dotSize === 'function' ? _this2.dotSize() : _this2.dotSize; | ||
circle.setAttributeNS(null, 'r', dotSize); | ||
circle.setAttributeNS(null, 'cx', rawPoint.x); | ||
circle.setAttributeNS(null, 'cy', rawPoint.y); | ||
circle.setAttributeNS(null, 'fill', _this2.penColor); | ||
svg.appendChild(path); | ||
} | ||
}, function (rawPoint) { | ||
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); | ||
var dotSize = typeof _this2.dotSize === 'function' ? _this2.dotSize() : _this2.dotSize; | ||
circle.setAttributeNS(null, 'r', dotSize); | ||
circle.setAttributeNS(null, 'cx', rawPoint.x); | ||
circle.setAttributeNS(null, 'cy', rawPoint.y); | ||
circle.setAttributeNS(null, 'fill', _this2.penColor); | ||
svg.appendChild(circle); | ||
}); | ||
svg.appendChild(circle); | ||
}); | ||
var prefix = 'data:image/svg+xml;base64,'; | ||
var header = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="' + minX + ' ' + minY + ' ' + maxX + ' ' + maxY + '">'; | ||
var body = svg.innerHTML; | ||
var footer = '</svg>'; | ||
var data = header + body + footer; | ||
var prefix = 'data:image/svg+xml;base64,'; | ||
var header = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="' + minX + ' ' + minY + ' ' + maxX + ' ' + maxY + '">'; | ||
var body = svg.innerHTML; | ||
var footer = '</svg>'; | ||
var data = header + body + footer; | ||
return prefix + btoa(data); | ||
}; | ||
return prefix + btoa(data); | ||
}; | ||
SignaturePad.prototype.fromData = function (pointGroups) { | ||
var _this3 = this; | ||
SignaturePad.prototype.fromData = function (pointGroups) { | ||
var _this3 = this; | ||
this.clear(); | ||
this.clear(); | ||
this._fromData(pointGroups, function (curve, widths) { | ||
return _this3._drawCurve(curve, widths.start, widths.end); | ||
}, function (rawPoint) { | ||
return _this3._drawDot(rawPoint); | ||
}); | ||
}; | ||
this._fromData(pointGroups, function (curve, widths) { | ||
return _this3._drawCurve(curve, widths.start, widths.end); | ||
}, function (rawPoint) { | ||
return _this3._drawDot(rawPoint); | ||
}); | ||
}; | ||
SignaturePad.prototype.toData = function () { | ||
return this._data; | ||
}; | ||
SignaturePad.prototype.toData = function () { | ||
return this._data; | ||
}; | ||
exports.default = SignaturePad; | ||
}); | ||
return SignaturePad; | ||
}))); |
{ | ||
"name": "signature_pad", | ||
"description": "Library for drawing smooth signatures.", | ||
"version": "1.6.0-beta.4", | ||
"version": "1.6.0-beta.5", | ||
"homepage": "https://github.com/szimek/signature_pad", | ||
@@ -13,5 +13,6 @@ "author": { | ||
"main": "dist/signature_pad.js", | ||
"jsnext:main": "src/signature_pad.js", | ||
"module": "dist/signature_pad.mjs", | ||
"scripts": { | ||
"build": "grunt && cp dist/signature_pad.js example/js/signature_pad.js", | ||
"build": "gulp", | ||
"watch": "gulp watch", | ||
"prepublish": "npm run build" | ||
@@ -31,10 +32,12 @@ }, | ||
"babel-preset-es2015": "^6.18.0", | ||
"del": "^2.2.2", | ||
"eslint": "^3.13.1", | ||
"eslint-config-airbnb-base": "^11.0.1", | ||
"eslint-plugin-import": "^2.2.0", | ||
"grunt": "^1.0.1", | ||
"grunt-babel": "^6.0.0", | ||
"grunt-contrib-uglify": "^2.0.0", | ||
"grunt-eslint": "^19.0.0" | ||
"gulp": "^3.9.1", | ||
"rollup": "^0.41.4", | ||
"rollup-plugin-babel": "^2.7.1", | ||
"rollup-plugin-eslint": "^3.0.0", | ||
"rollup-plugin-uglify": "^1.0.1" | ||
} | ||
} |
@@ -1,66 +0,4 @@ | ||
function Point(x, y, time) { | ||
this.x = x; | ||
this.y = y; | ||
this.time = time || new Date().getTime(); | ||
} | ||
import Point from './point'; | ||
import Bezier from './bezier'; | ||
Point.prototype.velocityFrom = function (start) { | ||
return (this.time !== start.time) ? this.distanceTo(start) / (this.time - start.time) : 1; | ||
}; | ||
Point.prototype.distanceTo = function (start) { | ||
return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2)); | ||
}; | ||
function Bezier(startPoint, control1, control2, endPoint) { | ||
this.startPoint = startPoint; | ||
this.control1 = control1; | ||
this.control2 = control2; | ||
this.endPoint = endPoint; | ||
} | ||
// Returns approximated length. | ||
Bezier.prototype.length = function () { | ||
const steps = 10; | ||
let length = 0; | ||
let px; | ||
let py; | ||
for (let i = 0; i <= steps; i += 1) { | ||
const t = i / steps; | ||
const cx = this._point( | ||
t, | ||
this.startPoint.x, | ||
this.control1.x, | ||
this.control2.x, | ||
this.endPoint.x, | ||
); | ||
const cy = this._point( | ||
t, | ||
this.startPoint.y, | ||
this.control1.y, | ||
this.control2.y, | ||
this.endPoint.y, | ||
); | ||
if (i > 0) { | ||
const xdiff = cx - px; | ||
const ydiff = cy - py; | ||
length += Math.sqrt((xdiff * xdiff) + (ydiff * ydiff)); | ||
} | ||
px = cx; | ||
py = cy; | ||
} | ||
return length; | ||
}; | ||
/* eslint-disable no-multi-spaces, space-in-parens */ | ||
Bezier.prototype._point = function (t, start, c1, c2, end) { | ||
return ( start * (1.0 - t) * (1.0 - t) * (1.0 - t)) | ||
+ (3.0 * c1 * (1.0 - t) * (1.0 - t) * t) | ||
+ (3.0 * c2 * (1.0 - t) * t * t) | ||
+ ( end * t * t * t); | ||
}; | ||
/* eslint-enable no-multi-spaces, space-in-parens */ | ||
function SignaturePad(canvas, options) { | ||
@@ -67,0 +5,0 @@ const self = this; |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
94528
13
1884
0
11