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:
| Android | iOS |
| ------------------------------------------------------------------------------- | --------------------------------------------------------- |
| [gcacace/android-signaturepad](https://github.com/gcacace/android-signaturepad) | [SignatureView](https://cocoapods.org/pods/SignatureView) |
## Video Tutorial
[Egghead lesson - https://egghead.io/lessons/javascript-capture-drawings-and-signatures-in-a-nativescript-app](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](http://tylerablake.com/nativescript/2019/05/02/capturing-signatures.html)
## Usage
#### XML:
```XML
```
### TS:
```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:
```javascript
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: `
`
})
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)
---
_Source: https://npm.io/package/nativescript-drawingpad · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
