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.
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 |
---|
| |
Native Libraries:
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';
public getMyDrawing() {
const drawingPad = topmost().getViewById('myDrawingPad');
drawingPad.getDrawing().then((res) => {
console.log(res);
});
}
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) {
const pad = this.DrawingPad.nativeElement;
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)