一个 NativeScript 插件，用于从设备捕获任何绘图（签名是常见用例）。您可以使用此组件捕获屏幕上可以绘制的任何内容。

安装

在您的命令提示符/终端中，转到您的应用程序根目录并执行

NativeScript 7+

ns plugin add @nativescript-community/drawingpad

NativeScript < 7

tns plugin add nativescript-drawingpad

示例

Android	iOS

原生库

视频教程

Egghead 课程 - https://egghead.io/lessons/javascript-capture-drawings-and-signatures-in-a-nativescript-app

书面教程

使用 Angular 的博客文章 - http://tylerablake.com/nativescript/2019/05/02/capturing-signatures.html

用法

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();
  }
}

属性

penColor - (Color) - 可选 指定要使用的笔（描边）颜色的属性。

penWidth - (int) - 可选 指定要使用的笔（描边）宽度的属性。

clearOnLongPress - (boolean = true) - 可选 iOS 仅支持 获取/设置长按是否清除视图。

方法

getDrawing() - Promise (成功时返回图像)

getDrawingAsBase64(format?: "png" | "jpg" | "jpeg") - Promise (成功时返回 base64 字符串形式的图像)

clearDrawing() - 从 DrawingPad 视图中清除绘图。

getDrawingSvg() - Promise (返回可缩放矢量图形文档)

Android 仅支持

• getTransparentDrawing() - Promise (返回带有透明背景的位图)