Search results

Signature

The Signature component allows user to draw smooth signatures as vector outline of strokes using variable width bezier 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. Signature component is a user interface to draw the Signature or Text. It provides supports for various Background color, Stroke color and Background Image.

<canvas id="signature"></canvas>
<script>
  let signatureObj: Signature = new Signature(null , "#signature");
</script>

Properties

backgroundColor

string

Gets or sets the background color of the component. The background color of the component that accepts hex value, rgb and text (like ‘red’). The default value is ”.

Defaults to

backgroundImage

string

Gets or sets the background image for the component. An image that used to fill the background of the component. The default value is ”.

Defaults to

disabled

boolean

Gets or sets whether to disable the signature component where the opacity is set to show disabled state. True, if the signature component is disabled for user interaction. The default value is false.

Defaults to false

enablePersistence

boolean

Gets or sets whether to persist component’s state between page reloads. True, if the component’s state persistence is enabled. The default value is false. Component’s property will be stored in browser local storage to persist component’s state when page reloads.

Defaults to false

isReadOnly

boolean

Gets or sets whether to prevent the interaction in signature component. True, if the signature component is read only state where the user interaction is prevented. The default value is false.

Defaults to false

maxStrokeWidth

number

Gets or sets the maximum stroke width for signature. The signature component calculates stroke width based on Velocity, MinStrokeWidth and MaxStrokeWidth. The maximum width of stroke. The default value is 2.0.

Defaults to 2

minStrokeWidth

number

Gets or sets the minimum stroke width for signature. The signature component calculates stroke width based on Velocity, MinStrokeWidth and MaxStrokeWidth. The minimum width of stroke. The default value is 0.5.

Defaults to 0.5

saveWithBackground

boolean

Gets or sets whether to save the signature along with Background Color and background Image while saving. True, if signature component to save with background. The default value is true.

Defaults to true

signatureValue

string

Gets or sets the last signature url to maintain the persist state.

strokeColor

string

Gets or sets the stroke color of the signature. The color of the signature stroke that accepts hex value, rgb and text (like ‘red’). The default value is “#000000”.

Defaults to ‘#000000’

velocity

number

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. The default value is 0.7.

Defaults to 0.7

Methods

addEventListener

Adds the handler to the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

canRedo

To check whether the redo collection is empty or not.

Returns boolean

canUndo

To check whether the undo collection is empty or not.

Returns boolean

clear

Erases all the signature strokes signed by user.

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers. Also it maintains the initial input element from the DOM.

Returns void

draw

To draw the signature based on the given text, with the font family and font size.

Parameter Type Description
text string specify text to be drawn as signature.
fontFamily (optional) string specify font family of a signature.
fontSize (optional) number specify font size of a signature.

Returns void

getBlob

To get the signature as Blob.

Parameter Type Description
url string specify the url/base 64 string to get blob of the signature.

Returns Blob

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

isEmpty

To check whether the signature is empty or not.

Returns boolean

load

To load the signature with the given base 64 string, height and width.

Parameter Type Description
signature string specify the url/base 64 string to be drawn as signature.
width (optional) number specify the width of the loaded signature image.
height (optional) number specify the height of the loaded signature image.

Returns void

redo

Redo the last user action.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

save

To save the signature with the given file type and file name.

Parameter Type Description
type (optional) string specify type of the file to be saved a signature.
fileName (optional) string specify name of the file to be saved a signature.

Returns void

saveAsBlob

To save the signature as Blob.

Returns Blob

undo

Undo the last user action.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

Returns void

Events

beforeSave

EmitType<SignatureBeforeSaveEventArgs>

Gets or sets an event callback that is raised while saving the signature. The file name and the file type can be changed using SignatureBeforeSaveEventArgs and SignatureFileType. The event callback is raised only for the keyboard action (Ctrl + S).

change

EmitType<SignatureChangeEventArgs>

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

created

EmitType<Event>

Triggers once the component rendering is completed.