Class SfSignature

Signature allows user to draw smooth signatures as vector outline of strokes using variable width Bézier curve interpolation. It allows to save signature as image. You can use your finger, pen, or mouse on a tablet, touchscreen, etc., to draw your own signature on this Signature component.

Inheritance

System.Object

SfBaseComponent

SfSignature

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

Namespace: Syncfusion.Blazor.Inputs

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfSignature : SfBaseComponent

Remarks

Signature is a user interface to draw the signature or text. It supports stroke color, background color and image.

Examples

In the below code example, a basic Signature initialized with SfSignature tag directive.

 
<SfSignature style="height: 100%; width: 100%;"></SfSignature>

Constructors

SfSignature()

Declaration

public SfSignature()

Properties

BackgroundColor

Gets or sets the background color of the component.

Declaration

public string BackgroundColor { get; set; }

Property Value

Type	Description
System.String	The background color of the component that accepts hex value, rgb and text (like red ). The default value is null.

BackgroundImage

Gets or sets the background image for the SfSignature component.

Declaration

public string BackgroundImage { get; set; }

Property Value

Type	Description
System.String	An image that used to fill the background of the component. The default value is null.

Changed

Gets or sets an event callback that is raised for the actions like undo, redo, clear and while user complete signing on SfSignature component.

Declaration

public EventCallback<SignatureChangeEventArgs> Changed { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<SignatureChangeEventArgs>	An event callback function.

Examples

<SfSignature Changed="@changefunc"></SfSignature>
@code 
{
    private void changefunc(SignatureChangeEventArgs args) 
    {
        if (args.ActionName == "Clear")
        {
            // validation code goes here
        }
    }
}

Created

Gets or sets an event callback that is raised when component rendering is completed.

Declaration

public EventCallback<object> Created { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>	A Task that completes when the component has finished the loading of base 64 string.

Remarks

You can load the pre-drawn signature when the signature component is created.

Examples

In the below code example, the pre-drawn signature is loaded using Created event.

<SfSignature Created="@Created">
</SfSignature >
@code {
    private void Created() {
        var sign = ""; // Base 64 or URL of the pre-drawn signature
        signature.LoadAsync(sign);
    }
}

In the below code example, the pre-drawn signature is loaded using Created event.

<SfSignature @ref="signature" Created="@Created">
</SfSignature >
@code {
    private void Created() {
        var sign = ""; // Base 64 or URL of the pre-drawn signature
        signature.LoadAsync(sign, 400, 400);
    }
}

Disabled

Gets or sets whether to disable the SfSignature component where the opacity is set to show disabled state.

Declaration

public bool Disabled { get; set; }

Property Value

Type	Description
System.Boolean	true, if the signature component is disabled for user interaction. The default value is false.

EnablePersistence

Gets or sets whether to persist component's state between page reloads.

Declaration

public bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean	true, if the component's state persistence is enabled. The default value is false.

Remarks

Component's property will be stored in browser local storage to persist component's state when page reloads.

HtmlAttributes

Gets or sets a collection of additional attributes that will applied to the SfSignature component.

Declaration

public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type
System.Collections.Generic.Dictionary<System.String, System.Object>

Remarks

Additional attributes can be added as inline attributes or by specifying @attributes directive.

Examples

In the below code example, signature height and width has been specified as style attribute in SfSignature.

<SfSignature style="height: 100%; width: 100%;"></SfSignature>

IsReadOnly

Gets or sets whether to prevent the interaction in SfSignature component.

Declaration

public bool IsReadOnly { get; set; }

Property Value

Type	Description
System.Boolean	true, if the signature component is read only state where the user interaction is prevented. The default value is false.

MaxStrokeWidth

Gets or sets the maximum stroke width for signature. The SfSignature component calculates stroke width based on Velocity, MinStrokeWidth and MaxStrokeWidth.

Declaration

public double MaxStrokeWidth { get; set; }

Property Value

Type	Description
System.Double	The maximum width of stroke. The default value is 2.0.

MinStrokeWidth

Gets or sets the minimum stroke width for signature. The SfSignature component calculates stroke width based on Velocity, MinStrokeWidth and MaxStrokeWidth.

Declaration

public double MinStrokeWidth { get; set; }

Property Value

Type	Description
System.Double	The minimum width of stroke. The default value is 0.5.

OnSave

Gets or sets an event callback that is raised while saving the signature.

Declaration

public EventCallback<SignatureSaveEventArgs> OnSave { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<SignatureSaveEventArgs>

Remarks

The file name and the file type(PNG, JPEG, SVG) can be changed using SignatureSaveEventArgs and SignatureFileType. The event callback is raised only for the keyboard action (Ctrl + S).

Examples

<SfSignature Changed="@beforesavefunc"></SfSignature>
@code 
{
    private void beforesavefunc(SignatureSaveEventArgs args) 
    {        
        args.fileType = "SignatureFileType.Jpeg";
    }
}

SaveWithBackground

Gets or sets whether to save the signature along with BackgroundColor and BackgroundImage while saving.

Declaration

public bool SaveWithBackground { get; set; }

Property Value

Type	Description
System.Boolean	true, if signature component to save with background. The default value is true.

StrokeColor

Gets or sets the stroke color of the signature.

Declaration

public string StrokeColor { get; set; }

Property Value

Type	Description
System.String	The color of the signature stroke that accepts hex value, rgb and text (like red ). The default value is "#000000".

Velocity

Gets or sets the velocity to calculate the stroke thickness based on the pressure of the contact on the digitizer surface. The Signature component calculates stroke thickness based on Velocity, MinStrokeWidth and MaxStrokeWidth.

Declaration

public double Velocity { get; set; }

Property Value

Type	Description
System.Double	The velocity to calculate the stroke thickness based on the pressure of the contact on the digitizer surface. The default value is 0.7.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

CanRedoAsync()

Returns whether the redo collection is empty or not.

Declaration

public Task<bool> CanRedoAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.Boolean>	A Task that returns bool when it has finished.

CanUndoAsync()

Returns whether the undo collection is empty or not.

Declaration

public Task<bool> CanUndoAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.Boolean>	A Task that returns bool when it has finished.

ClearAsync()

Erases all the signature strokes signed by user.

Declaration

public Task ClearAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A Task that completes when the component has finished the erasing.

DrawAsync(String, String, Int32, Nullable<Double>, Nullable<Double>)

Draws the text as signature on SfSignature component.

Declaration

public Task DrawAsync(string text, string fontFamily = "Arial", int fontSize = 30, Nullable<double> x = null, Nullable<double> y = null)

Parameters

Type	Name	Description
System.String	text	The text to render.
System.String	fontFamily	The font family.
System.Int32	fontSize	The font size.
System.Nullable<System.Double>	x	Optional. Specify X- coordinates to draw a signature. Default to the center point of the image if it is not specified.
System.Nullable<System.Double>	y	Optional. Specify Y- coordinates to draw a signature. Default to the center point of the image if it is not specified.

Returns

Type	Description
System.Threading.Tasks.Task	A Task that completes when the component has finished the drawing of text.

GetSignatureAsync(SignatureFileType)

Returns the signature as base 64 string.

Declaration

public Task<string> GetSignatureAsync(SignatureFileType type)

Parameters

Type	Name	Description
SignatureFileType	type

Returns

Type	Description
System.Threading.Tasks.Task<System.String>	A Task that returns base 64 string when it has finished.

Remarks

SaveWithBackground decides whether to save the signature with background or not. SignatureFileType decides what type of signature base64 url to be get.

IsEmptyAsync()

Returns whether the signature is empty or not.

Declaration

public Task<bool> IsEmptyAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.Boolean>	A Task that returns bool when it has finished.

LoadAsync(String, Nullable<Int32>, Nullable<Int32>)

Renders the base 64 string as signature on SfSignature component.

Declaration

public Task LoadAsync(string signature, Nullable<int> width = null, Nullable<int> height = null)

Parameters

Type	Name	Description
System.String	signature	The base 64 string to render.
System.Nullable<System.Int32>	width	The width.
System.Nullable<System.Int32>	height	The height.

Returns

Type	Description
System.Threading.Tasks.Task	A Task that completes when the component has finished the loading of base 64 string.

OnAfterRenderAsync(Boolean)

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender

Returns

Type
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Declaration

protected override Task OnInitializedAsync()

Returns

Type
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task

RedoAsync()

Redo the last user action.

Declaration

public Task RedoAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A Task that completes when the component has finished the redo action.

RefreshAsync()

Refreshes the signature canvas to reflect external changes, ensuring the updated height and width.

Declaration

public Task RefreshAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A Task that completes when the component has finished re-rendering with the new canvas dimensions.

SaveAsBlobAsync()

Returns the signature as Blob.

Declaration

public Task<object> SaveAsBlobAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.Object>	A Task that returns the blob when it has finished.

Remarks

SaveWithBackground decides whether to save the signature with background or not.

SaveAsync(SignatureFileType, String)

Saves the signature as an image with the given file type and name.

Declaration

public Task SaveAsync(SignatureFileType fileType, string fileName = "Signature")

Parameters

Type	Name	Description
SignatureFileType	fileType	A file type SignatureFileType.
System.String	fileName	A file name.

Returns

Type	Description
System.Threading.Tasks.Task	A Task that completes when the component has finished the saving operation.

Remarks

SaveWithBackground decides whether to save the signature with background or not.

UndoAsync()

Undo the last user action.

Declaration

public Task UndoAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A Task that completes when the component has finished the undo action.