Skip to content
📝 NativeScript plugin to provide a way to capture any drawing (signatures are a common use case) from the device
TypeScript JavaScript Shell HTML CSS Ruby
Branch: master
Clone or download
Latest commit 4e2edd9 Jun 17, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo-angular
demo karma Mar 7, 2019
images
publish fix plugin structure Mar 7, 2019
src
.gitignore demo-angular Mar 7, 2019
.prettierrc
.travis.yml
LICENSE fix plugin structure Mar 7, 2019
README.md doc longpress bool Jun 17, 2019
tslint.json fix plugin structure Mar 7, 2019

README.md

NativeScript DrawingPad

NativeScript plugin to provide a way to capture any drawing (signatures are a common use case) from the device. You can use this component to capture really anything you want that can be drawn on the screen.

npm npm build status stars donate nStudio banner

Do you need assistance on your project or plugin? Contact the nStudio team anytime at team@nstudio.io to get up to speed with the best practices in mobile and web app development.


Installation

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

NativeScript

tns plugin add nativescript-drawingpad

Samples

Android iOS
Sample1 Sample2

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)
You can’t perform that action at this time.