How to create signature pad using imageeditor?

This section explains how to  create signature pad using imageeditor.

 Create SfImageEditor sample with all necessary assemblies.

 Please refer the below link to create a simple SfImageEditor sample along with the ways to configure it.

https://help.syncfusion.com/xamarin/sfimageeditor/getting-started

Please refer the below steps to create signature pad with toolbar and without using toolbar

Without using toolbar:

Step 1: To create signature pad, you need to set toolbar visibility to false in image editor as like below code snippet

 
signatureEditor.ToolbarSettings.IsVisible = false;
 

Step 2: To add signature in image editor, you need to set Add Shape as path when loading image editor   in sample as like below

  
  Device.StartTimer(TimeSpan.FromMilliseconds(1000), () =>
                {
                    signatureEditor.AddShape(ShapeType.Path, new PenSettings());
                    return false;
                });
    

Step 3: To save the signature, you need to call save method in button click.

 
     void Save_Clicked(object sender, System.EventArgs e)
        {
            signatureEditor.Save(".png");        
         
        }
 
 

Step 4: To get the stream of saved signature, need to call image saving event as like below

  
SignatureEditor.ImageSaving += (sender, args) =>
            {
                args.Cancel = true;
               var stream = args.Stream;
            }
 

Step 5: To clear the signature, you need to call reset method in button click as like below

private void Reset_Clicked(object sender, EventArgs e)
        {
            signatureEditor.Reset();
          
        }

Screen Shot:

C

Sample Link:

https://www.syncfusion.com/downloads/support/directtrac/general/ze/IESample1244809765.zip

Using Toolbar:

Step 1: Select path or draw icon to add signature in image editor

Step 2: Select Save toolbar item to save the signature.

Step 3: To get the stream of saved signature, need to call image saving event as mentioned in above step 4.

Step 4: To clear the signature, you need to select reset toolbar item.

Screen Shot:

Sample Link:

 https://www.syncfusion.com/downloads/support/directtrac/general/ze/IESample-1627803997.zip