NativeScript 7.0+

使用插件版本 1.1.0

NativeScript Paint

此插件允许艺术家使用跨平台的透明度和宽度设置在应用程序中创建绘画。在 iOS 上，除了画笔，还有喷枪。使用喷枪，您可以控制喷枪流量以改变绘画效果。此插件对需要更多艺术友好型插件的用户非常有用。与 颜色选择插件 结合使用，可以启用颜色更改。

安装

tns plugin add nativescript-paint

需要插件

import { PaintPad } from 'nativescript-paint';

使用 PaintPad

JavaScript

1. 将插件添加到您的 xml 中

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:paint="nativescript-paint">

2. 创建 PaintPad 区域

<paint:PaintPad canvasColor="#fff" id="paintPad" margin="10" width="280" height="280" drawColor="{{ drawColor }}" drawWidth="{{ drawWidth }}" airBrushFlow="{{ airBrushFlow }}" drawOpacity="{{ drawOpacity }}" />

Angular

1. 在模块中注册插件

import { registerElement } from 'nativescript-angular/element-registry';
registerElement('PaintPad', () => require('nativescript-paint').PaintPad);

2. 将其添加到您的标记中

<PaintPad
    canvasColor="#fff"
     #PaintPad			
     [drawColor]="drawColor"
     [drawWidth]="drawWidth"
     [airBrushFlow]="airBrushFlow"
     [drawOpacity]="drawOpacity"
></PaintPad>

3. 通过 id 引用 PaintPad 来操作它

@ViewChild('PaintPad') PaintPad: ElementRef;
this.myPaintPad = this.PaintPad.nativeElement;

Vue

1. 在 main.js 中注册元素

Vue.registerElement('PaintPad', () => require('nativescript-paint').PaintPad);

2. 在您的应用程序中使用它

<PaintPad
    canvasColor="#fff"
    ref="paintPad"
    :drawColor="drawColor"
    :drawWidth="drawWidth"
    :airBrushFlow="airBrushFlow"
    :drawOpacity="drawOpacity"
/>

3. 通过 ref 引用 PaintPad 来操作它

selectAirBrush() {
    this.$refs.paintPad.nativeView.setToolType(1);
}

演示

在 /src 中，您可以使用 npm 脚本来在纯 JS、Angular 和 Vue 中运行演示。运行

npm run demo.ios 或 npm run demo-ng.ios 或 npm run demo-vue.ios。同样重置演示，运行 npm run demo(-ng 或 -vue).reset。

用法

描述您插件的使用特定信息。如有必要，为 Android、iOS、Angular 提供示例。例如，请参阅 nativescript-drop-down。 javascript 在这里放置用法代码片段)

API

在此处描述您插件的方法和属性。例如，请参阅 nativescript-feedback。

致谢

感谢 Brad Martin，他是第一个绘图插件 NativeScript-Drawingpad 的作者，此插件在此基础上进行了大量开发，并感谢 Nathan Walker 和 Osei Fortune 的帮助。 ❤️

许可证

Apache 许可证版本 2.0，2004 年 1 月