Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including nativescript-signaturepad with all npm packages installed. Try it out:

var nativescriptSignaturepad = require("nativescript-signaturepad")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

nativescript-signaturepad v0.1.3

A NativeScript plugin to provide a way to capture signatures (and any other drawing) from the device screen.

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:

AndroidiOS
gcacace/android-signaturepadSignatureView

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 1Sample 2
Sample1Sample2
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free