diff --git a/SignaturePad/wwwroot/sigpad.min.js b/SignaturePad/wwwroot/sigpad.min.js index b64e037..d54633d 100644 --- a/SignaturePad/wwwroot/sigpad.min.js +++ b/SignaturePad/wwwroot/sigpad.min.js @@ -8,7 +8,8 @@ const sigpadMap = new Map(); -function drawPoints(ctx, points) { +// finished param: only draw last point after points wont differ from exec to exec +function drawPoints(ctx, points, finished) { // draw a point instead if (points.length == 1) { var b = points[0]; @@ -17,7 +18,7 @@ function drawPoints(ctx, points) { } // draw line for just two points - if (points.length == 2) { + if (points.length == 2 && finished) { ctx.beginPath(), ctx.moveTo(points[0].x, points[0].y); ctx.lineTo(points[1].x, points[1].y); ctx.stroke(); @@ -32,7 +33,7 @@ function drawPoints(ctx, points) { d = (points[i].y + points[i + 1].y) / 2; ctx.quadraticCurveTo(points[i].x, points[i].y, c, d); } - if (i < points.length - 1) + if (i < points.length - 1 && finished) ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y); //ctx.closePath(); ctx.stroke(); @@ -231,7 +232,7 @@ export default class Sigpad { return; } - data.render(); + data.render(true); data._drawing = false; const event = new CustomEvent('sigpad.finish', { detail: data.getImage() }); @@ -266,7 +267,8 @@ export default class Sigpad { } } - render() { + //finished: signal to renderer that all individual mouse position arrays are complete + render(finished) { if (this._element.width != this._element.clientWidth) { this._element.width = this._element.clientWidth; } @@ -274,7 +276,7 @@ export default class Sigpad { if (this._drawing) { var ctx = this._element.getContext("2d"); this._applyOptions(ctx); - this._mousePosis.filter((stroke) => stroke.length > 0).forEach((stroke) => drawPoints(ctx, stroke)); + this._mousePosis.filter((stroke) => stroke.length > 0).forEach((stroke) => drawPoints(ctx, stroke, finished)); } } } @@ -293,7 +295,7 @@ const requestAnimFrame = (function (callback) { (function renderSignatures() { requestAnimFrame(renderSignatures); Sigpad.getAllInstances().forEach((sigpad, index) => { - sigpad.render(); + sigpad.render(false); }); })();