Installation

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

NativeScript

tns plugin add nativescript-drawingpad

Samples

| Android | iOS | | ------------------------------------- | --------------------------------- | | | |

Native Libraries:

| Android | iOS | | ------------------------------------------------------------------------------- | --------------------------------------------------------- | | gcacace/android-signaturepad | SignatureView |

Video Tutorial

Egghead lesson - https://egghead.io/lessons/javascript-capture-drawings-and-signatures-in-a-nativescript-app

Written Tutorial

Blog post using Angular - http://tylerablake.com/nativescript/2019/05/02/capturing-signatures.html

Usage

XML:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:DrawingPad="nativescript-drawingpad" loaded="pageLoaded">
    <ActionBar title="NativeScript-DrawingPad" />
    <ScrollView>
        <StackLayout>

            <DrawingPad:DrawingPad
            height="400"
            id="drawingPad"
            penColor="{{ penColor }}" penWidth="{{ penWidth }}" />

        </StackLayout>
    </ScrollView>
</Page>

TS:

import { topmost } from 'ui/frame';
import { DrawingPad } from 'nativescript-drawingpad';

// To get the drawing...

  public getMyDrawing() {
      const drawingPad = topmost().getViewById('myDrawingPad');
      drawingPad.getDrawing().then((res) => {
          console.log(res);
       });
    }


// If you want to clear the signature/drawing...
public clearMyDrawing() {
    const drawingPad = topmost().getViewById('myDrawingPad');
    drawingPad.clearDrawing();
}

Angular:

import { Component, ElementRef, ViewChild } from '@angular/core';
import { registerElement } from 'nativescript-angular/element-registry';

registerElement(
  'DrawingPad',
  () => require('nativescript-drawingpad').DrawingPad
);

@Component({
  selector: 'drawing-pad-example',
  template: `
    <ScrollView>
        <StackLayout>
            <DrawingPad #DrawingPad 
            height="400" 
            id="drawingPad" 
            penColor="#ff4081" penWidth="3">
            </DrawingPad>

            <StackLayout orientation="horizontal">
                <Button text="Get Drawing" (tap)="getMyDrawing()"></Button>
                <Button text="Clear Drawing" (tap)="clearMyDrawing()"></Button>
            </StackLayout>
        </StackLayout>
    </ScrollView>
    `
})
export class DrawingPadExample {
  @ViewChild('DrawingPad') DrawingPad: ElementRef;

  getMyDrawing(args) {
    // get reference to the drawing pad
    const pad = this.DrawingPad.nativeElement;

    // then get the drawing (Bitmap on Android) of the drawingpad
    let drawingImage;
    pad.getDrawing().then(
      data => {
        console.log(data);
        drawingImage = data;
      },
      err => {
        console.log(err);
      }
    );
  }

  clearMyDrawing(args) {
    const pad = this.DrawingPad.nativeElement;
    pad.clearDrawing();
  }
}

Properties

penColor - (Color) - optional Property to specify the pen (stroke) color to use.

penWidth - (int) - optional Property to specify the pen (stroke) width to use.

clearOnLongPress - (boolean = true) - optional iOS Only Gets/sets whether a long press will clear the view.

Methods

getDrawing() - Promise (returns image if successful)

clearDrawing() - clears the drawing from the DrawingPad view.

getDrawingSvg() - Promise (returns a Scalable Vector Graphics document)

Android Only

• getTransparentDrawing() - Promise (returns a bitmap with a transparent background)