Signature_Pad throttle version

Developer
Kunuk Nykjær
Size
15,715 Kb
Views
18,216
  1. Signature_Pad throttle version Previews
  2. Signature_Pad throttle version HTML Codes
  3. Signature_Pad throttle version CSS Codes
  4. Signature_Pad throttle version JS Codes

How do I make an signature_pad throttle version?

Added throttling configuration without lagging. Date.now() is used to saved last known draw move event. Throttle reduces point sampling.. What is a signature_pad throttle version? How do you make a signature_pad throttle version? This script and codes were developed by Kunuk Nykjær on 03 December 2022, Saturday.

Signature_Pad throttle version Previews
IQ Test

Signature_Pad throttle version - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Signature_Pad throttle version</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<base target="_blank"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a id="github" href="https://github.com/szimek/signature_pad"> <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"> </a> <h1>Throttling prototype</h1> <div id="signature-pad" class="m-signature-pad"> <div class="m-signature-pad--body"> <canvas></canvas> </div> <div class="m-signature-pad--footer"> <div class="description">Sign above</div> <div class="left"> <button type="button" class="button clear" data-action="clear">Clear</button> <button type="button" class="button debug" data-action="debug-points">Draw points</button> </div> <div class="right"> <button type="button" class="button save" data-action="save-png">Save as PNG</button> <button type="button" class="button save" data-action="save-svg">Save as SVG</button> </div> </div> </div> <script src="js/index.js"></script>
</body>
</html>

Signature_Pad throttle version - Script Codes CSS Codes

.button.debug{ color: red; font-weight: 700;
}
body { background: url("data:image/png;base64,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") repeat scroll center center rgb(179, 179, 179); font-family: Helvetica, Sans-Serif; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
}
.m-signature-pad { position: absolute; font-size: 10px; width: 700px; height: 400px; top: 50%; left: 50%; margin-left: -350px; margin-top: -200px; border: 1px solid #e8e8e8; background-color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset; border-radius: 4px;
}
.m-signature-pad:before, .m-signature-pad:after {	position: absolute; z-index: -1; content: "";	width: 40%;	height: 10px;	left: 20px;	bottom: 10px;	background: transparent;	-webkit-transform: skew(-3deg) rotate(-3deg);	-moz-transform: skew(-3deg) rotate(-3deg);	-ms-transform: skew(-3deg) rotate(-3deg);	-o-transform: skew(-3deg) rotate(-3deg);	transform: skew(-3deg) rotate(-3deg);	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}
.m-signature-pad:after {	left: auto;	right: 20px;	-webkit-transform: skew(3deg) rotate(3deg);	-moz-transform: skew(3deg) rotate(3deg);	-ms-transform: skew(3deg) rotate(3deg);	-o-transform: skew(3deg) rotate(3deg);	transform: skew(3deg) rotate(3deg);
}
.m-signature-pad--body { position: absolute; left: 20px; right: 20px; top: 20px; bottom: 80px; border: 1px solid #f4f4f4;
}
.m-signature-pad--body canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 4px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset; }
.m-signature-pad--footer { position: absolute; left: 20px; right: 20px; bottom: 20px; height: 60px;
}
.m-signature-pad--footer .description { color: #C3C3C3; text-align: center; font-size: 1.2em; margin-top: 1em; }
.m-signature-pad--footer .left, .right { position: absolute; bottom: 0; }
.m-signature-pad--footer .left { left: 0; }
.m-signature-pad--footer .right { right: 0; }
@media screen and (max-width: 1024px) { .m-signature-pad { top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; min-width: 250px; min-height: 140px; margin: 5%; } #github { display: none; }
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) { .m-signature-pad { margin: 10%; }
}
@media screen and (max-height: 320px) { .m-signature-pad--body { left: 0; right: 0; top: 0; bottom: 32px; } .m-signature-pad--footer { left: 20px; right: 20px; bottom: 4px; height: 28px; } .m-signature-pad--footer .description { font-size: 1em; margin-top: 1em; }
}

Signature_Pad throttle version - Script Codes JS Codes

// MODIFIED version 4
/*! * Signature Pad v1.6.0-beta.6 * https://github.com/szimek/signature_pad * * Copyright 2017 Szymon Nowak * Released under the MIT license * * The main idea and some parts of the code (e.g. drawing variable width Bézier curve) are taken from: * http://corner.squareup.com/2012/07/smoother-signatures.html * * Implementation of interpolation using cubic Bézier curves is taken from: * http://benknowscode.wordpress.com/2012/09/14/path-interpolation-using-cubic-bezier-and-control-point-estimation-in-javascript * * Algorithm for approximated length of a Bézier curve is taken from: * http://www.lemoda.net/maths/bezier-length/index.html * */
(function (global, factory) {	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :	typeof define === 'function' && define.amd ? define(factory) :	(global.SignaturePad = factory());
}(this, (function () { 'use strict';
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.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 () { 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; } 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 */
// http://stackoverflow.com/a/27078401/815507
function throttle(func, wait, options) { var context, args, result; var timeout = null; var previous = 0; if (!options) options = {}; var later = function later() { previous = options.leading === false ? 0 : Date.now(); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; return function () { var now = Date.now(); if (!previous && options.leading === false) previous = now; var remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout(timeout); timeout = null; } previous = now; result = func.apply(context, args); if (!timeout) context = args = null; } else if (!timeout && options.trailing !== false) { timeout = setTimeout(later, remaining); } return result; };
}
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.throttle = opts.throttle || 0; if (this.throttle) { this._strokeMoveUpdate = throttle(SignaturePad.prototype._strokeUpdate, this.throttle); } else { this._strokeMoveUpdate = SignaturePad.prototype._strokeUpdate; } 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; this.lastUpdateTimeStamp = null; this._canvas = canvas; this._ctx = canvas.getContext('2d'); this.clear(); // 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._handleMouseMove = function (event) { if (self._mouseButtonDown) { self._strokeMoveUpdate(event, true); } }; this._handleMouseUp = function (event) { if (event.which === 1 && self._mouseButtonDown) { self._mouseButtonDown = false; self._strokeEnd(event); } }; this._handleTouchStart = function (event) { if (event.targetTouches.length === 1) { var touch = event.changedTouches[0]; self._strokeBegin(touch); } }; this._handleTouchMove = function (event) { // Prevent scrolling. event.preventDefault(); var touch = event.targetTouches[0]; self._strokeMoveUpdate(touch, true); }; this._handleTouchEnd = function (event) { var wasCanvasTouched = event.target === self._canvas; if (wasCanvasTouched) { event.preventDefault(); self._strokeEnd(event); } }; // Enable mouse and touch event handlers this.on();
}
// Public methods
SignaturePad.prototype.clear = function () { var ctx = this._ctx; var canvas = this._canvas; ctx.fillStyle = this.backgroundColor; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height); this._data = []; this._reset(); this._isEmpty = true;
};
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;
};
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]; } return (_canvas = this._canvas).toDataURL.apply(_canvas, [type].concat(options)); }
};
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); 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;
};
// Private methods
SignaturePad.prototype._strokeBegin = function (event) { this._data.push([]); this._reset(); this._strokeUpdate(event); if (typeof this.onBegin === 'function') { this.onBegin(event); }
};
SignaturePad.prototype._strokeUpdate = function (event) { var x = event.clientX; var y = event.clientY; var point = this._createPoint(x, y); var _addPoint = this._addPoint(point), curve = _addPoint.curve, widths = _addPoint.widths; 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 });
};
SignaturePad.prototype._strokeEnd = function (event) { var canDrawCurve = this.points.length > 2; var point = this.points[0]; if (!canDrawCurve && point) { this._drawDot(point); } if (typeof this.onEnd === 'function') { this.onEnd(event); }
};
SignaturePad.prototype._handleMouseEvents = function () { this._mouseButtonDown = false; 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'; 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._createPoint = function (x, y, time) { var rect = this._canvas.getBoundingClientRect(); 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; 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]); 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(); return { curve: curve, widths: widths }; } 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; 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 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 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) };
};
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 newWidth = this._strokeWidth(velocity); widths.start = this._lastWidth; widths.end = newWidth; this._lastVelocity = velocity; this._lastWidth = newWidth; return widths;
};
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; ctx.moveTo(x, y); ctx.arc(x, y, size, 0, 2 * Math.PI, false); this._isEmpty = false;
};
// Debug
SignaturePad.prototype.drawDataAsPoints = function (size, fill) { var ctx = this._ctx; ctx.save(); var length = this._data.length; var i = void 0; var j = void 0; var x = void 0; var y = void 0; if (length) { for (i = 0; i < length; i += 1) { for (j = 0; j < this._data[i].length; j += 1) { var point = this._data[i][j]; x = point.x; y = point.y; ctx.moveTo(x, y); ctx.arc(x, y, size || 5, 0, 2 * Math.PI, false); ctx.fillStyle = fill || 'rgba(255, 0, 0, 0.2)'; ctx.fill(); } } } ctx.restore();
};
SignaturePad.prototype._drawMark = function (x, y, size, fill) { var ctx = this._ctx; ctx.save(); ctx.moveTo(x, y); ctx.arc(x, y, size || 5, 0, 2 * Math.PI, false); ctx.fillStyle = fill || 'rgba(255, 0, 0, 0.2)'; ctx.fill(); ctx.restore();
};
SignaturePad.prototype._drawCurve = function (curve, startWidth, endWidth) { var ctx = this._ctx; var widthDelta = endWidth - startWidth; var drawSteps = Math.floor(curve.length()); 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; 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 width = startWidth + ttt * widthDelta; this._drawPoint(x, y, width); } ctx.closePath(); ctx.fill();
};
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();
};
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 (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. } } } else { this._reset(); var _rawPoint = group[0]; drawDot(_rawPoint); } }
};
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'); 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'); // 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'); 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); }); 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);
};
SignaturePad.prototype.fromData = function (pointGroups) { var _this3 = this; this.clear(); 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;
};
return SignaturePad;
})));
var wrapper = document.getElementById("signature-pad"), clearButton = wrapper.querySelector("[data-action=clear]"), debugPointsButton = wrapper.querySelector("[data-action=debug-points]"), savePNGButton = wrapper.querySelector("[data-action=save-png]"), saveSVGButton = wrapper.querySelector("[data-action=save-svg]"), canvas = wrapper.querySelector("canvas"), signaturePad;
// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() { // When zoomed out to less than 100%, for some very strange reason, // some browsers report devicePixelRatio as less than 1 // and only part of the canvas is cleared then. var ratio = Math.max(window.devicePixelRatio || 1, 1); canvas.width = canvas.offsetWidth * ratio; canvas.height = canvas.offsetHeight * ratio; canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
signaturePad = new SignaturePad(canvas, { throttle: 16 // x milli seconds
});
clearButton.addEventListener("click", function (event) { signaturePad.clear();
});
debugPointsButton.addEventListener("click", function (event) { signaturePad.drawDataAsPoints();
});
savePNGButton.addEventListener("click", function (event) { if (signaturePad.isEmpty()) { alert("Please provide signature first."); } else { window.open(signaturePad.toDataURL()); }
});
saveSVGButton.addEventListener("click", function (event) { if (signaturePad.isEmpty()) { alert("Please provide signature first."); } else { window.open(signaturePad.toDataURL('image/svg+xml')); }
});
Signature_Pad throttle version - Script Codes
Signature_Pad throttle version - Script Codes
Home Page Home
Developer Kunuk Nykjær
Username kunukn
Uploaded December 03, 2022
Rating 3
Size 15,715 Kb
Views 18,216
Do you need developer help for Signature_Pad throttle version?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kunuk Nykjær (kunukn) Script Codes
Name
Day 090 - Equalizer - version 1
Material design - button rainbow circle
Smartphones sharing same background
Windows 10 toggle buttons
Some math dances
Responsive Cross design
Find the match - memory game
Google and Microsoft theme colors
Responsive SVG hexagon list with circle image
Stairs 3D
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!