NativeScript 7.0+

Use version 1.1.0 of the plugin

NativeScript Paint

This plugin allows the artist to create paintings in an app using opacity and width settings cross platform. On iOS, an Airbrush as well as a Paintbrush is available. With the Airbrush, you can control Airbrush Flow to make the paint effect change. This plugin would be useful to folks who need a more art-friendly type plugin. Use with the Color Picker plugin to enable color changes.

Installation

tns plugin add nativescript-paint

Requiring the plugin

import { PaintPad } from 'nativescript-paint';

Using the PaintPad

JavaScript

1. Add the plugin to your xml

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

2. Create a PaintPad area

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

Angular

1. Register the plugin in a module

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

2. Add it to your markup

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

3. Reference the PaintPad by id to manipulate it

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

Vue

1. In main.js, register the element:

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

2. Use it in your app:

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

3. Reference the PaintPad by ref to manipulate it

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

Demos

In /src, you can use npm scripts to run demos in vanilla JS, Angular and Vue. Run:

npm run demo.ios or npm run demo-ng.ios or npm run demo-vue.ios. Reset the demos similarly, running npm run demo(-ng or -vue).reset.

Usage

Describe any usage specifics for your plugin. Give examples for Android, iOS, Angular if needed. See nativescript-drop-down for example. javascript Usage code snippets here)

| iOS | Android | | ------------------------------------------------------- | ---------------------------------------------------------- | | DAScratchPad | FreeDrawView |

API

Describe your plugin methods and properties here. See nativescript-feedback for example.

| Property | Default | Description | | --------------- | ------------------------ | ---------------------------------------------------------- | | drawWidth | 5 | width of the brush | | drawColor | #3489db | a hex code for color | | drawOpacity | 1 (iOS) or 255 (Android) | on iOS, set this to between 0-1. On Android, between 0-255 | | airBrushFlow | 0.7 | iOS only - how heavy the Airbrush paints | | getPainting | | save an image of your painting | | clearPainting | | clear the paint area | | setToolType | 0 | iOS only - set 0 for Paintbrush, 1 for Airbrush |

Credits

With gratitude to Brad Martin, author of the first drawing plugin NativeScript-Drawingpad, on which this plugin is heavily based, and to the help of Nathan Walker and Osei Fortune. ❤️

License

Apache License Version 2.0, January 2004