Socket
Socket
Sign inDemoInstall

@nativescript-community/drawingpad

Package Overview
Dependencies
0
Maintainers
10
Versions
2
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nativescript-community/drawingpad

A NativeScript plugin to provide a way to capture any drawing (signatures are a common use case) from the device screen.


Version published
Maintainers
10
Created

Readme

Source

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.

Action Build npm npm


Installation

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

NativeScript 7+:
ns plugin add @nativescript-community/drawingpad
NativeScript < 7:
tns plugin add nativescript-drawingpad

Samples

AndroidiOS
Sample1Sample2
Native Libraries:
AndroidiOS
gcacace/android-signaturepadSignatureView

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-community/drawingpad" loaded="pageLoaded">
    <ActionBar title="NativeScript-DrawingPad" />
    <ScrollView>
        <StackLayout>

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

        </StackLayout>
    </ScrollView>
</Page>

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:

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 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)

Keywords

FAQs

Last updated on 15 Jan 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc