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

您在项目或插件上需要帮助吗？请联系 nStudio 团队，随时随地通过 [email protected] 了解移动和Web应用开发的最佳实践。

安装

在您的命令提示符/终端中，转到您的应用根文件夹并执行

NativeScript

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-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';

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

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

属性

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

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

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

方法

getDrawing() - Promise （如果成功则返回图像）

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

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

仅限 Android

• getTransparentDrawing() - Promise （返回一个具有透明背景的位图）