Skip to content
πŸ‘©πŸ»β€πŸŽ¨A simple painting plugin allowing for opacity and different brushes
C C++ TypeScript Objective-C Makefile HTML Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
demo-ng fixing angular demo Feb 24, 2019
demo-vue final fix for Vue demo Feb 24, 2019
demo
publish published! and edited README Feb 24, 2019
src adding postclone.js Mar 4, 2019
.gitignore Create .gitignore Feb 4, 2019
.travis.yml first commit Feb 4, 2019
LICENSE first commit Feb 4, 2019
README.md published! and edited README Feb 24, 2019
demo.gif fixing angular demo Feb 24, 2019
tslint.json first commit Feb 4, 2019

README.md

NativeScript Paint

apple android

npm version

NPM

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.

demo

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">
  1. 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);
  1. Add it to your markup
<PaintPad
    canvasColor="#fff"
     #PaintPad			
     [drawColor]="drawColor"
     [drawWidth]="drawWidth"
     [airBrushFlow]="airBrushFlow"
     [drawOpacity]="drawOpacity"
></PaintPad>
  1. 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);
  1. Use it in your app:
<PaintPad
    canvasColor="#fff"
    ref="paintPad"
    :drawColor="drawColor"
    :drawWidth="drawWidth"
    :airBrushFlow="airBrushFlow"
    :drawOpacity="drawOpacity"
/>
  1. 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


You can’t perform that action at this time.