From 2487904bae2bbdce9f04dc70966cfcf89235cfdc Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Tue, 23 Jul 2024 09:45:29 +0200 Subject: [PATCH 1/3] Fix background color #45 --- SignaturePad/SignaturePad.csproj | 2 +- SignaturePad/SignaturePad.razor.cs | 2 +- SignaturePad/wwwroot/sigpad.interop.js | 2 +- SignaturePad/wwwroot/sigpad.min.js | 11 +++++++---- 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/SignaturePad/SignaturePad.csproj b/SignaturePad/SignaturePad.csproj index c0e2d89..34e222f 100644 --- a/SignaturePad/SignaturePad.csproj +++ b/SignaturePad/SignaturePad.csproj @@ -4,7 +4,7 @@ net8.0 enable enable - 8.1.4 + 8.1.5 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 5336d83..129e493 100644 --- a/SignaturePad/SignaturePad.razor.cs +++ b/SignaturePad/SignaturePad.razor.cs @@ -75,7 +75,7 @@ protected async override Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { - _jsModule = await jsRuntime.InvokeAsync("import", "./_content/Blazor.SignaturePad/sigpad.interop.js?ver=8.1.4"); + _jsModule = await jsRuntime.InvokeAsync("import", "./_content/Blazor.SignaturePad/sigpad.interop.js?ver=8.1.5"); await Setup(); await Update(); await UpdateImage(); diff --git a/SignaturePad/wwwroot/sigpad.interop.js b/SignaturePad/wwwroot/sigpad.interop.js index 2d971ce..0b79768 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.4" +import Sigpad from "./sigpad.min.js?ver=8.1.5" var dotNetHelper; export function setup(id, reference, options, image) { diff --git a/SignaturePad/wwwroot/sigpad.min.js b/SignaturePad/wwwroot/sigpad.min.js index be5c242..9df98bf 100644 --- a/SignaturePad/wwwroot/sigpad.min.js +++ b/SignaturePad/wwwroot/sigpad.min.js @@ -143,10 +143,7 @@ export default class Sigpad { } setImage(image) { - if (this._config.backgroundColor != null && this._config.backgroundColor != "") { - ctx.fillStyle = this._config.backgroundColor; - ctx.fillRect(0, 0, this._element.width, this._element.height); - } + if (this._config.backgroundImage != null && this._config.backgroundImage != "") { this.setBackgroundImage(this._config.backgroundImage); @@ -285,6 +282,12 @@ export default class Sigpad { ctx.clearRect(0, 0, this._element.width, this._element.height); + if (this._config.backgroundColor != null && this._config.backgroundColor != "") { + ctx.fillStyle = this._config.backgroundColor; + ctx.fillRect(0, 0, this._element.width, this._element.height); + } + + if (this._bgImg != undefined && this._bgImg.complete) { ctx.drawImage(this._bgImg, 0, 0, this._bgImg.width * window.devicePixelRatio, From 51c77876de423ad854b8c399afe6f3245e979f0b Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Tue, 23 Jul 2024 09:50:55 +0200 Subject: [PATCH 2/3] Force render on first load to init background colors --- SignaturePad/wwwroot/sigpad.min.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/SignaturePad/wwwroot/sigpad.min.js b/SignaturePad/wwwroot/sigpad.min.js index 9df98bf..8f7b8e4 100644 --- a/SignaturePad/wwwroot/sigpad.min.js +++ b/SignaturePad/wwwroot/sigpad.min.js @@ -84,6 +84,8 @@ export default class Sigpad { this._element.width = this._element.clientWidth; this._element.height = this._element.clientHeight; + + this.render(true); } destroy() { From c927fe5bf389f033df6d9ebb027f9c32f6b5931d Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Tue, 23 Jul 2024 09:51:03 +0200 Subject: [PATCH 3/3] Add background color demo --- .../Components/Pages/BGColor.razor | 3 ++ BlazorServerDemo/Pages/BGColor.razor | 3 ++ BlazorWebAssemblyDemo/Pages/BGColor.razor | 3 ++ Demos.Core/NavMenu.razor | 6 +++ .../BackgroundColorDemo.razor | 52 +++++++++++++++++++ 5 files changed, 67 insertions(+) create mode 100644 BlazorSRRDemo/BlazorSRRDemo/Components/Pages/BGColor.razor create mode 100644 BlazorServerDemo/Pages/BGColor.razor create mode 100644 BlazorWebAssemblyDemo/Pages/BGColor.razor create mode 100644 Demos.Core/SignaturePadDemos/BackgroundColorDemo.razor diff --git a/BlazorSRRDemo/BlazorSRRDemo/Components/Pages/BGColor.razor b/BlazorSRRDemo/BlazorSRRDemo/Components/Pages/BGColor.razor new file mode 100644 index 0000000..c9310f1 --- /dev/null +++ b/BlazorSRRDemo/BlazorSRRDemo/Components/Pages/BGColor.razor @@ -0,0 +1,3 @@ +@page "/BGColorDemo" + + \ No newline at end of file diff --git a/BlazorServerDemo/Pages/BGColor.razor b/BlazorServerDemo/Pages/BGColor.razor new file mode 100644 index 0000000..5b56b21 --- /dev/null +++ b/BlazorServerDemo/Pages/BGColor.razor @@ -0,0 +1,3 @@ +@page "/BGColorDemo" + + \ No newline at end of file diff --git a/BlazorWebAssemblyDemo/Pages/BGColor.razor b/BlazorWebAssemblyDemo/Pages/BGColor.razor new file mode 100644 index 0000000..5b56b21 --- /dev/null +++ b/BlazorWebAssemblyDemo/Pages/BGColor.razor @@ -0,0 +1,3 @@ +@page "/BGColorDemo" + + \ No newline at end of file diff --git a/Demos.Core/NavMenu.razor b/Demos.Core/NavMenu.razor index 6f1bbb2..bd80082 100644 --- a/Demos.Core/NavMenu.razor +++ b/Demos.Core/NavMenu.razor @@ -35,6 +35,12 @@ +
+ + BG Color + +
+
BG Image diff --git a/Demos.Core/SignaturePadDemos/BackgroundColorDemo.razor b/Demos.Core/SignaturePadDemos/BackgroundColorDemo.razor new file mode 100644 index 0000000..823bd2d --- /dev/null +++ b/Demos.Core/SignaturePadDemos/BackgroundColorDemo.razor @@ -0,0 +1,52 @@ +@inject NavigationManager navigationManager +@inject SignatureInMemoryService memoryService + +

BackgroundColorDemo

+ + + + +@if (Input.Signature.Any()) +{ +

Signature

+ + + +} + +@if (memoryService.Signature.Any()) +{ + +} + + + +@code { + public MyInput Input { get; set; } = new(); + + private SignaturePadOptions _options = new SignaturePadOptions + { + LineCap = LineCap.Round, + LineJoin = LineJoin.Round, + LineWidth = 10, + BackgroundColor = "red", + StrokeStyle = System.Drawing.Color.White + }; + + + private void SaveSignature() + { + memoryService.Signature = Input.Signature; + } + + private void OpenSignature() + { + navigationManager.NavigateTo(Input.SignatureAsBase64); + } + + private void ReadSignature() + { + Input.Signature = memoryService.Signature; + StateHasChanged(); + } +}