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.
From your command prompt/termial go to your app's root folder and execute:
ns plugin add @nativescript-community/drawingpadtns plugin add nativescript-drawingpad| Android | iOS |
|---|---|
 |  |
| Android | iOS |
|---|---|
| gcacace/android-signaturepad | SignatureView |
Blog post using Angular - http://tylerablake.com/nativescript/2019/05/02/capturing-signatures.html
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:DrawingPad="@nativescript-community/drawingpad" loaded="pageLoaded"> <ActionBar title="NativeScript-DrawingPad" /> <ScrollView> <StackLayout> <DrawingPad:DrawingPad height="400" id="drawingPad" penColor="{{ penColor }}" penWidth="{{ penWidth }}" /> </StackLayout> </ScrollView> </Page>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(); }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: ` <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); // 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 image = new ImageSource(data); // this can be set as the `src` of an `Image` inside your NS drawingImage = image; // 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 console.log('::IMG_BASE64::', base64imageString); }, (err) => { console.log(err); } ); } clearMyDrawing(args) { const pad = this.DrawingPad.nativeElement; pad.clearDrawing(); } }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.
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)
- getTransparentDrawing() - Promise (returns a bitmap with a transparent background)