Draw Text as a Signature in Blazor Signature component

6 Aug 20263 minutes to read

Text can be drawn as a Blazor Signature using the DrawAsync method with different font families such as Arial and Serif, and with different font sizes. This method accepts the signature text, font family, font size, and optional x/y coordinates as its parameters. The default font family is “Arial” and the default font size is “30”.

@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns

<div>
    <div class="e-sign-heading">
        <div class="e-header-item">
            <SfTextBox CssClass="e-outline" @ref="text" Placeholder='Enter the text'></SfTextBox>
        </div>
        <div class="e-header-item">
           <SfDropDownList TItem="fontFields" TValue="string" PopupHeight="200px" @bind-Value="@Value" DataSource="@font">
                <DropDownListFieldSettings Text="Text" Value="Text" />
            </SfDropDownList>
        </div>
        <div class="e-header-item">
            <SfDropDownList TItem="sizeFields" TValue="int" PopupHeight="200px" @bind-Value="@size" DataSource="@sizes">
                <DropDownListFieldSettings Text="Text" Value="Text" />
            </SfDropDownList>
        </div>
        <span class="e-btn-options">
            <SfButton CssClass="e-primary" @onclick="OnDraw">Draw</SfButton>
        </span>
    </div>
    <div class='e-sign-content'>
        <SfSignature @ref="signature" style="width: 400px; height: 300px;"></SfSignature>
    </div>
</div>


@code{
    private SfSignature signature;
    private SfTextBox text;
    public string Value = "Arial";
    public int size = 20;
    public class fontFields
    {
        public string Text { get; set; }
    }
    private List<fontFields> font = new List<fontFields>()
    {
        new fontFields(){ Text= "Arial" },
        new fontFields(){ Text= "Serif" },
        new fontFields(){ Text= "Sans-serif" },
        new fontFields(){ Text= "Cursive" },
        new fontFields(){ Text= "Fantasy" },
     };
    public class sizeFields
    {
        public int Text { get; set; }
    }
    private List<sizeFields> sizes = new List<sizeFields>()
    {
        new sizeFields(){ Text= 20 },
        new sizeFields(){ Text= 30 },
        new sizeFields(){ Text= 40 },
        new sizeFields(){ Text= 50 }
     };
    private async void OnDraw()
    {
        await signature.DrawAsync(text.Value, Value, size);
    }
}

<style>
    .e-sign-content,
    .e-sign-heading {
        width: 400px;
    }

    #signdescription {
        font-size: 14px;
        padding-bottom: 10px;
    }

    .e-btn-options {
        float: right;
        margin: 0px 0px 10px;
    }

    .e-header-item {
        padding-bottom: 10px;
    }
</style>