nativescript-signaturepad
by bradmartin | v0.1.3
A NativeScript plugin to provide a way to capture signatures (and any other drawing) from the device screen.
npm i --save nativescript-signaturepad

NativeScript-SignaturePad :pencil:

NativeScript plugin to provide a way to capture signatures (or any drawing) from the device. You can use this component to capture really anything you want that can be drawn on the screen. Go crazy with it!!!

WARNING - iOS is in development and should be available soon. ANDROID ONLY for now.

Platform controls used:

Android iOS
gcacace/android-signaturepad SignatureView

Installation

From your command prompt/termial go to your app's root folder and execute:

npm install nativescript-signaturepad

Usage

XML:

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:SignaturePad="nativescript-signaturepad">
<StackLayout>
<SignaturePad:SignaturePad
height="200"
id="drawingPad"
penColor="#ff4081"
penWidth="3" />

<button text="Get Drawing" tap="getDrawing" />
<button text="Clear Drawing" tap="clearDrawing" />
</StackLayout>
</Page>

JS:

var frame = require("ui/frame");

// To get the drawing...
function getDrawing(args) {
// get reference to the drawing pad
var pad = frame.topmost().currentPage.getViewById("drawingPad");
// then access the 'drawing' property (Bitmap on Android) of the signaturepad
var drawingImage = pad.drawing;
}
exports.getDrawing = getDrawing;

// If you want to clear the signature/drawing...
function clearDrawing(args) {
var pad = frame.topmost().currentPage.getViewById("drawingPad");
pad.clearDrawing();
}
exports.clearDrawing = clearDrawing;

Attributes

penColor - (color string) - optional

Attribute to specify the pen (stroke) color to use.

penWidth - (int) - optional

Attribute to specify the pen (stroke) width to use.

Sample Screenshots

Sample 1 Sample 2
Sample1 Sample2