From 8c98108ceec81036dc96d7c0874c8908294ad855 Mon Sep 17 00:00:00 2001 From: Nicola Date: Tue, 2 Jul 2024 18:49:40 +0200 Subject: [PATCH 1/6] fill disregards strokestyle --- SignaturePad/wwwroot/sigpad.min.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/SignaturePad/wwwroot/sigpad.min.js b/SignaturePad/wwwroot/sigpad.min.js index 570f0e5..2fb2f06 100644 --- a/SignaturePad/wwwroot/sigpad.min.js +++ b/SignaturePad/wwwroot/sigpad.min.js @@ -11,8 +11,9 @@ const sigpadMap = new Map(); function drawPoints(ctx, points) { // draw a point instead if (points.length == 1) { - var b = points[0]; - ctx.beginPath(), ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, !0), ctx.closePath(), ctx.fill(); + ctx.beginPath(), ctx.moveTo(points[0].x, points[0].y); + ctx.lineTo(points[0].x, points[0].y); + ctx.stroke(); return } @@ -269,11 +270,9 @@ export default class Sigpad { if (this._element.width != this._element.clientWidth) { this._element.width = this._element.clientWidth; } - if (this._drawing) { var ctx = this._element.getContext("2d"); this._applyOptions(ctx); this._mousePosis.filter((stroke) => stroke.length > 0).forEach((stroke) => drawPoints(ctx, stroke)); - } } } From 81f2ef814198ad15017ac1f36c81724ca5b59ec9 Mon Sep 17 00:00:00 2001 From: Nicola Date: Tue, 2 Jul 2024 19:12:15 +0200 Subject: [PATCH 2/6] redo arc and change fillstyle instead --- SignaturePad/wwwroot/sigpad.min.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/SignaturePad/wwwroot/sigpad.min.js b/SignaturePad/wwwroot/sigpad.min.js index 2fb2f06..1a3ab5a 100644 --- a/SignaturePad/wwwroot/sigpad.min.js +++ b/SignaturePad/wwwroot/sigpad.min.js @@ -11,9 +11,8 @@ const sigpadMap = new Map(); function drawPoints(ctx, points) { // draw a point instead if (points.length == 1) { - ctx.beginPath(), ctx.moveTo(points[0].x, points[0].y); - ctx.lineTo(points[0].x, points[0].y); - ctx.stroke(); + var b = points[0]; + ctx.beginPath(), ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, !0), ctx.closePath(), ctx.fill(); return } @@ -99,6 +98,7 @@ export default class Sigpad { ctx = this._element.getContext("2d"); } ctx.strokeStyle = this._config.strokeStyle; + ctx.fillStyle = this._config.strokeStyle; ctx.lineWidth = this._config.lineWidth; ctx.lineCap = this._config.lineCap; ctx.lineJoin = this._config.lineJoin; From 45c79593156b9765e248dcf814c7f1e63a3bc27d Mon Sep 17 00:00:00 2001 From: Nicola Date: Tue, 2 Jul 2024 19:13:52 +0200 Subject: [PATCH 3/6] added removed drawing check in render --- SignaturePad/wwwroot/sigpad.min.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/SignaturePad/wwwroot/sigpad.min.js b/SignaturePad/wwwroot/sigpad.min.js index 1a3ab5a..b64e037 100644 --- a/SignaturePad/wwwroot/sigpad.min.js +++ b/SignaturePad/wwwroot/sigpad.min.js @@ -270,9 +270,12 @@ export default class Sigpad { if (this._element.width != this._element.clientWidth) { this._element.width = this._element.clientWidth; } + + if (this._drawing) { var ctx = this._element.getContext("2d"); this._applyOptions(ctx); this._mousePosis.filter((stroke) => stroke.length > 0).forEach((stroke) => drawPoints(ctx, stroke)); + } } } From 2c23084b5a757c0617dd224dde251a3a0f130153 Mon Sep 17 00:00:00 2001 From: CodeGod911 Date: Wed, 3 Jul 2024 00:16:28 +0200 Subject: [PATCH 4/6] fix artifacts on slower devices --- SignaturePad/wwwroot/sigpad.min.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) 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); }); })(); From 0c8cdb0dac1da255bb0444a863e2fcc30da610c2 Mon Sep 17 00:00:00 2001 From: "DOMCENT\\CENTNTB" Date: Wed, 3 Jul 2024 08:04:28 +0200 Subject: [PATCH 5/6] updated version to prevent caching --- SignaturePad/wwwroot/sigpad.interop.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/SignaturePad/wwwroot/sigpad.interop.js b/SignaturePad/wwwroot/sigpad.interop.js index 323a0c8..8769c33 100644 --- a/SignaturePad/wwwroot/sigpad.interop.js +++ b/SignaturePad/wwwroot/sigpad.interop.js @@ -1,4 +1,4 @@ -import Sigpad from "./sigpad.min.js?ver=8.1.1" +import Sigpad from "./sigpad.min.js?ver=8.1.3" var dotNetHelper; export function setup(id, reference, options, image) { From b0ce96db3a3cd2f7f20da15fb49e141b66024f20 Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Wed, 3 Jul 2024 13:07:25 +0200 Subject: [PATCH 6/6] Update version to v8.1.3 --- SignaturePad/SignaturePad.csproj | 2 +- SignaturePad/SignaturePad.razor.cs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/SignaturePad/SignaturePad.csproj b/SignaturePad/SignaturePad.csproj index 90ab5d1..63bef5b 100644 --- a/SignaturePad/SignaturePad.csproj +++ b/SignaturePad/SignaturePad.csproj @@ -4,7 +4,7 @@ net8.0 enable enable - 8.1.2 + 8.1.3 A simple to use blazor component to draw a signature. 2023 https://github.com/MarvinKlein1508/SignaturePad diff --git a/SignaturePad/SignaturePad.razor.cs b/SignaturePad/SignaturePad.razor.cs index e7460a2..205603c 100644 --- a/SignaturePad/SignaturePad.razor.cs +++ b/SignaturePad/SignaturePad.razor.cs @@ -72,7 +72,7 @@ protected async override Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { - _jsModule = await jsRuntime.InvokeAsync("import", "./_content/Blazor.SignaturePad/sigpad.interop.js?ver=8.1.2"); + _jsModule = await jsRuntime.InvokeAsync("import", "./_content/Blazor.SignaturePad/sigpad.interop.js?ver=8.1.3"); await Setup(); await Update(); await UpdateImage();