I just wanted to put in my own vote for a Radzen Blazor server-side signature component.
I'm using a 3rd party's option, but it's really clunky. It would be nice to have a built-in version from Radzen when possible.
What is that you find clunky in that 3rd party option? What would you like to see improved or done better?
I use MobSites' signature pad.
The worst part of it is getting the signature pad to display properly:
<SignaturePad @ref="signature" Image="@ThisPermitFooter!.SignaturePath" @bind-Value="@ThisPermitFooter!.SignaturePath" ImageHeight="100" ImageWidth="400" MaxHeight="175" MaxWidth="650" MinHeight="175" MinWidth="450" OnSignatureChange="@(() => GetSignature())">
<SignaturePadFooter>
<SignaturePadUndo Image="/BigGameDepredation/img/undo-icon.png" />
</SignaturePadFooter>
</SignaturePad>
Notice the ImageHeight, ImageWidth, MaxHeight, MaxWidth, MinHeight, and MinWidth values -- ImageWidth and ImageHeight control the signature image, of course, and Max and MinWidth and Max and MinHeight control the overall control size -- if you set a single setting, you have to set all six. I would love to have a control that I could just set the max width and height, then let it deal with the rest of it itself.
When the user signs it, notice the doubled signature about 2/3 the size of the original in the background...
(Ignore the broken image link; that's because I'm running this on my local desktop, and the image it uses is on the server; the button looks great when the page is displayed on the server)
To be honest signature-pad is probably the most popular open source signature library. I doubt it we could do much better.
I think that's one of the unique features of signature pad - it simulates "pressure" so lines are with variable width. Here is a quote from their github repository:
Signature Pad is a JavaScript library for drawing smooth signatures. It's HTML5 canvas based and uses variable width Bézier curve interpolation
1 Like