@nativescript-community/drawingpad

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.

---

Installation

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

#### NativeScript 7+:

``bash
ns plugin add @nativescript-community/drawingpad
`

#### NativeScript < 7:

`bash
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:

`XML





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




`

$3

`TS
import { Frame, ImageSource } from '@nativescript/core';
import { DrawingPad } from '@nativescript-community/drawingpad';

// To get the drawing...
public getMyDrawing() {
const drawingPad = Frame.topmost().getViewById('myDrawingPad');
drawingPad.getDrawing().then((res) => {
console.log(res);
// At this point you have a native image (Bitmap on Android or UIImage on iOS)
// so lets convert to a NS Image using the ImageSource
const img = new ImageSource(res); // this can be set as the src of an Image inside your NSapplication now.
// now you might want a base64 version of the image
const base64imageString = image.toBase64String('jpg'); // if you need it as base64
});
}


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

Angular:

`javascript
import { Component, ElementRef, ViewChild } from '@angular/core';
import { registerElement } from '@nativescript/angular';
import { ImageSource } from '@nativescript/core';
import { DrawingPad } from '@nativescript-community/drawingpad';

registerElement('DrawingPad', () => DrawingPad);

@Component({
selector: 'drawing-pad-example',
template:


#DrawingPad
height="400"
id="drawingPad"
penColor="#ff4081"
penWidth="3"
>


})
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);
// At this point you have a native image (Bitmap on Android or UIImage on iOS)
// so lets convert to a NS Image using the ImageSource
const img = new ImageSource(res); // this can be set as the src of an Image inside your NS
drawingImage = img; // to set the src of an Image if needed.
// now you might want a base64 version of the image
const base64imageString = image.toBase64String('jpg'); // if you need it as base64
},
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)_

getDrawingAsBase64(format?: "png" | "jpg" | "jpeg") - Promise _(returns image as base64 string 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)