2 lines
9.4 KiB
JavaScript
2 lines
9.4 KiB
JavaScript
!function (t, i) { "object" == typeof exports && "undefined" != typeof module ? module.exports = i() : "function" == typeof define && define.amd ? define(i) : (t = "undefined" != typeof globalThis ? globalThis : t || self).SmoothSignature = i() }(this, (function () { "use strict"; function t(t, i) { for (var e = 0; i.length > e; e++) { var n = i[e]; n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), Object.defineProperty(t, n.key, n) } } var i = /Android|iPhone|iPad|Mobile/i.test(navigator.userAgent), e = function () { function e(t, n) { var a = this; !function (t, i) { if (!(t instanceof i)) throw new TypeError("Cannot call a class as a function") }(this, e), this.canvas = {}, this.ctx = {}, this.width = 320, this.height = 200, this.scale = window.devicePixelRatio || 1, this.color = "black", this.bgColor = "", this.canDraw = !1, this.openSmooth = !0, this.minWidth = 2, this.maxWidth = 6, this.minSpeed = 1.5, this.maxWidthDiffRate = 20, this.points = [], this.canAddHistory = !0, this.historyList = [], this.maxHistoryLength = 20, this.onStart = function () { }, this.onEnd = function () { }, this.addListener = function () { a.removeListener(), a.canvas.style.touchAction = "none", i && ("ontouchstart" in window || navigator.maxTouchPoints) ? (a.canvas.addEventListener("touchstart", a.onDrawStart, { passive: !1 }), a.canvas.addEventListener("touchmove", a.onDrawMove, { passive: !1 }), document.addEventListener("touchcancel", a.onDrawEnd, { passive: !1 }), document.addEventListener("touchend", a.onDrawEnd, { passive: !1 })) : (a.canvas.addEventListener("mousedown", a.onDrawStart), a.canvas.addEventListener("mousemove", a.onDrawMove), document.addEventListener("mouseup", a.onDrawEnd)) }, this.removeListener = function () { a.canvas.style.touchAction = "auto", a.canvas.removeEventListener("touchstart", a.onDrawStart), a.canvas.removeEventListener("touchmove", a.onDrawMove), document.removeEventListener("touchend", a.onDrawEnd), document.removeEventListener("touchcancel", a.onDrawEnd), a.canvas.removeEventListener("mousedown", a.onDrawStart), a.canvas.removeEventListener("mousemove", a.onDrawMove), document.removeEventListener("mouseup", a.onDrawEnd) }, this.onDrawStart = function (t) { t.preventDefault(), a.canDraw = !0, a.canAddHistory = !0, a.ctx.strokeStyle = a.color, a.initPoint(t), a.onStart && a.onStart(t) }, this.onDrawMove = function (t) { if (t.preventDefault(), a.canDraw && (a.initPoint(t), a.points.length >= 2)) { a.addHistory(); var i = a.points.slice(-1)[0], e = a.points.slice(-2, -1)[0]; window.requestAnimationFrame ? window.requestAnimationFrame((function () { return a.onDraw(e, i) })) : a.onDraw(e, i) } }, this.onDraw = function (t, i) { a.openSmooth ? a.drawSmoothLine(t, i) : a.drawNoSmoothLine(t, i) }, this.onDrawEnd = function (t) { a.canDraw && (a.canDraw = !1, a.canAddHistory = !0, a.points = [], a.onEnd && a.onEnd(t)) }, this.getLineWidth = function (t) { return Math.min(Math.max(a.maxWidth - (a.maxWidth - a.minWidth) * t / (a.minSpeed > 10 ? 10 : 1 > a.minSpeed ? 1 : a.minSpeed), a.minWidth), a.maxWidth) }, this.getRadianData = function (t, i, e, n) { var a = e - t, o = n - i; if (0 === a) return { val: 0, pos: -1 }; if (0 === o) return { val: 0, pos: 1 }; var s = Math.abs(Math.atan(o / a)); return e > t && i > n || t > e && n > i ? { val: s, pos: 1 } : { val: s, pos: -1 } }, this.getRadianPoints = function (t, i, e, n) { if (0 === t.val) return 1 === t.pos ? [{ x: i, y: e + n }, { x: i, y: e - n }] : [{ y: e, x: i + n }, { y: e, x: i - n }]; var a = Math.sin(t.val) * n, o = Math.cos(t.val) * n; return 1 === t.pos ? [{ x: i + a, y: e + o }, { x: i - a, y: e - o }] : [{ x: i + a, y: e - o }, { x: i - a, y: e + o }] }, this.initPoint = function (t) { var i = Date.now(), e = a.points.slice(-1)[0]; if (!e || e.t !== i) { var n = a.canvas.getBoundingClientRect(), o = t.touches && t.touches[0] || t, s = o.clientX - n.left, h = o.clientY - n.top; if (!e || e.x !== s || e.y !== h) { var r = { x: s, y: h, t: i }; if (a.openSmooth && e) { var d = a.points.slice(-2, -1)[0]; if (r.distance = Math.sqrt(Math.pow(r.x - e.x, 2) + Math.pow(r.y - e.y, 2)), r.speed = r.distance / (r.t - e.t || .1), r.lineWidth = a.getLineWidth(r.speed), d && d.lineWidth && e.lineWidth) { var c = (r.lineWidth - e.lineWidth) / e.lineWidth, l = a.maxWidthDiffRate / 100; if (l = l > 1 ? 1 : .01 > l ? .01 : l, Math.abs(c) > l) r.lineWidth = e.lineWidth * (1 + (c > 0 ? l : -l)) } } a.points.push(r), a.points = a.points.slice(-3) } } }, this.drawSmoothLine = function (t, i) { var e = i.x - t.x, n = i.y - t.y; if (Math.abs(e) + Math.abs(n) > a.scale ? (i.lastX1 = t.x + .3 * e, i.lastY1 = t.y + .3 * n, i.lastX2 = t.x + .7 * e, i.lastY2 = t.y + .7 * n) : (i.lastX1 = i.lastX2 = t.x + .5 * e, i.lastY1 = i.lastY2 = t.y + .5 * n), i.perLineWidth = (t.lineWidth + i.lineWidth) / 2, "number" == typeof t.lastX1) { if (a.drawCurveLine(t.lastX2, t.lastY2, t.x, t.y, i.lastX1, i.lastY1, i.perLineWidth), t.isFirstPoint) return; if (t.lastX1 === t.lastX2 && t.lastY1 === t.lastY2) return; var o = a.getRadianData(t.lastX1, t.lastY1, t.lastX2, t.lastY2), s = a.getRadianPoints(o, t.lastX1, t.lastY1, t.perLineWidth / 2), h = a.getRadianPoints(o, t.lastX2, t.lastY2, i.perLineWidth / 2); a.drawTrapezoid(s[0], h[0], h[1], s[1]) } else i.isFirstPoint = !0 }, this.drawNoSmoothLine = function (t, i) { i.lastX = t.x + .5 * (i.x - t.x), i.lastY = t.y + .5 * (i.y - t.y), "number" == typeof t.lastX && a.drawCurveLine(t.lastX, t.lastY, t.x, t.y, i.lastX, i.lastY, a.maxWidth) }, this.drawCurveLine = function (t, i, e, n, o, s, h) { a.ctx.lineWidth = Number(h.toFixed(1)), a.ctx.beginPath(), a.ctx.moveTo(Number(t.toFixed(1)), Number(i.toFixed(1))), a.ctx.quadraticCurveTo(Number(e.toFixed(1)), Number(n.toFixed(1)), Number(o.toFixed(1)), Number(s.toFixed(1))), a.ctx.stroke() }, this.drawTrapezoid = function (t, i, e, n) { a.ctx.beginPath(), a.ctx.moveTo(Number(t.x.toFixed(1)), Number(t.y.toFixed(1))), a.ctx.lineTo(Number(i.x.toFixed(1)), Number(i.y.toFixed(1))), a.ctx.lineTo(Number(e.x.toFixed(1)), Number(e.y.toFixed(1))), a.ctx.lineTo(Number(n.x.toFixed(1)), Number(n.y.toFixed(1))), a.ctx.fillStyle = a.color, a.ctx.fill() }, this.drawBgColor = function () { a.bgColor && (a.ctx.fillStyle = a.bgColor, a.ctx.fillRect(0, 0, a.width, a.height)) }, this.drawByImageUrl = function (t) { var i = new Image; i.onload = function () { a.ctx.clearRect(0, 0, a.width, a.height), a.ctx.drawImage(i, 0, 0, a.width, a.height) }, i.crossOrigin = "anonymous", i.src = t }, this.addHistory = function () { a.maxHistoryLength && a.canAddHistory && (a.canAddHistory = !1, a.historyList.push(a.canvas.toDataURL()), a.historyList = a.historyList.slice(-a.maxHistoryLength)) }, this.clear = function () { a.ctx.clearRect(0, 0, a.width, a.height), a.drawBgColor(), a.historyList.length = 0 }, this.undo = function () { var t = a.historyList.splice(-1)[0]; t && a.drawByImageUrl(t) }, this.toDataURL = function () { var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "image/png", i = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 1; if (a.canvas.width === a.width) return a.canvas.toDataURL(t, i); var e = document.createElement("canvas"); e.width = a.width, e.height = a.height; var n = e.getContext("2d"); return n.drawImage(a.canvas, 0, 0, e.width, e.height), e.toDataURL(t, i) }, this.getPNG = function () { return a.toDataURL() }, this.getJPG = function () { var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : .8; return a.toDataURL("image/jpeg", t) }, this.isEmpty = function () { var t = document.createElement("canvas"), i = t.getContext("2d"); return t.width = a.canvas.width, t.height = a.canvas.height, a.bgColor ? (i.fillStyle = a.bgColor, i.fillRect(0, 0, t.width, t.height)) : 1 !== a.scale && i.scale(a.scale, a.scale), t.toDataURL() === a.canvas.toDataURL() }, this.getRotateCanvas = function () { var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 90; t = t > 0 ? t > 90 ? 180 : 90 : -90 > t ? 180 : -90; var i = document.createElement("canvas"), e = a.width, n = a.height; 180 === t ? (i.width = e, i.height = n) : (i.width = n, i.height = e); var o = i.getContext("2d"); return o.rotate(t * Math.PI / 180), 90 === t ? o.drawImage(a.canvas, 0, -n, e, n) : -90 === t ? o.drawImage(a.canvas, -e, 0, e, n) : 180 === t && o.drawImage(a.canvas, -e, -n, e, n), i }, this.init(t, n) } var n, a, o; return n = e, a = [{ key: "init", value: function (t) { var i = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}; t && (this.canvas = t, this.ctx = t.getContext("2d"), this.width = i.width || t.clientWidth || this.width, this.height = i.height || t.clientHeight || this.height, this.scale = i.scale || this.scale, this.color = i.color || this.color, this.bgColor = i.bgColor || this.bgColor, this.openSmooth = void 0 === i.openSmooth ? this.openSmooth : !!i.openSmooth, this.minWidth = i.minWidth || this.minWidth, this.maxWidth = i.maxWidth || this.maxWidth, this.minSpeed = i.minSpeed || this.minSpeed, this.maxWidthDiffRate = i.maxWidthDiffRate || this.maxWidthDiffRate, this.maxHistoryLength = i.maxHistoryLength || this.maxHistoryLength, this.onStart = i.onStart, this.onEnd = i.onEnd, this.scale > 0 && (this.canvas.height = this.height * this.scale, this.canvas.width = this.width * this.scale, 1 !== this.scale && (this.canvas.style.width = this.width + "px", this.canvas.style.height = this.height + "px", this.ctx.scale(this.scale, this.scale))), this.ctx.lineCap = "round", this.drawBgColor(), this.addListener()) } }], a && t(n.prototype, a), o && t(n, o), e }(); return e }));
|