Merge pull request #46 from MarvinKlein1508/fix-background-color

Fix background color
MarvinKlein1508 · Jul 23, 2024 · 34ea882 · 34ea882
2 parents 871f3a1 + c927fe5
commit 34ea882
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 7 deletions.
diff --git a/BlazorSRRDemo/BlazorSRRDemo/Components/Pages/BGColor.razor b/BlazorSRRDemo/BlazorSRRDemo/Components/Pages/BGColor.razor
@@ -0,0 +1,3 @@
+@page "/BGColorDemo"
+
+<BackgroundColorDemo @rendermode="InteractiveServer" />
diff --git a/BlazorServerDemo/Pages/BGColor.razor b/BlazorServerDemo/Pages/BGColor.razor
@@ -0,0 +1,3 @@
+@page "/BGColorDemo"
+
+<BackgroundColorDemo />
diff --git a/BlazorWebAssemblyDemo/Pages/BGColor.razor b/BlazorWebAssemblyDemo/Pages/BGColor.razor
@@ -0,0 +1,3 @@
+@page "/BGColorDemo"
+
+<BackgroundColorDemo />
diff --git a/Demos.Core/NavMenu.razor b/Demos.Core/NavMenu.razor
@@ -35,6 +35,12 @@
  </NavLink>
  </div>
 
+ <div class="nav-item px-3">
+ <NavLink class="nav-link" href="BGColorDemo" Match="NavLinkMatch.All">
+ <span class="oi oi-home" aria-hidden="true"></span> BG Color
+ </NavLink>
+ </div>
+
  <div class="nav-item px-3">
  <NavLink class="nav-link" href="BGImageDemo" Match="NavLinkMatch.All">
  <span class="oi oi-home" aria-hidden="true"></span> BG Image

diff --git a/Demos.Core/SignaturePadDemos/BackgroundColorDemo.razor b/Demos.Core/SignaturePadDemos/BackgroundColorDemo.razor
@@ -0,0 +1,52 @@
+@inject NavigationManager navigationManager
+@inject SignatureInMemoryService memoryService
+
+<h3>BackgroundColorDemo</h3>
+
+<SignaturePad @bind-Value="Input.Signature" Options="_options" style="width: 100%;" />
+
+
+@if (Input.Signature.Any())
+{
+ <h2>Signature</h2>
+ <img src="@Input.SignatureAsBase64" />
+ <button type="button" class="btn btn-primary" @onclick="SaveSignature">Save signature</button>
+ <button type="button" class="btn btn-primary" @onclick="OpenSignature">Open signature</button>
+}
+
+@if (memoryService.Signature.Any())
+{
+ <button type="button" class="btn btn-primary ms-1" @onclick="ReadSignature">Read signature</button>
+}
+
+
+
+@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();
+ }
+}
diff --git a/SignaturePad/SignaturePad.csproj b/SignaturePad/SignaturePad.csproj
@@ -4,7 +4,7 @@
  <TargetFramework>net8.0</TargetFramework>
  <Nullable>enable</Nullable>
  <ImplicitUsings>enable</ImplicitUsings>
- <Version>8.1.4</Version>
+ <Version>8.1.5</Version>
  <Description>A simple to use blazor component to draw a signature.</Description>
  <Copyright>2023</Copyright>
  <RepositoryUrl>https://github.com/MarvinKlein1508/SignaturePad</RepositoryUrl>

diff --git 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<IJSObjectReference>("import", "./_content/Blazor.SignaturePad/sigpad.interop.js?ver=8.1.4");
+ _jsModule = await jsRuntime.InvokeAsync<IJSObjectReference>("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
@@ -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
@@ -84,6 +84,8 @@ export default class Sigpad {
 
  this._element.width = this._element.clientWidth;
  this._element.height = this._element.clientHeight;
+
+ this.render(true);
  }
 
  destroy() {
@@ -143,10 +145,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 +284,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,