Nascent Plasticine Materialist

    nativescript-paint
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    NativeScript 7.0+

    Use version 1.1.0 of the plugin

    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

    
    

    Install

    npm i nativescript-paint

    DownloadsWeekly Downloads

    5

    Version

    2.1.0

    License

    Apache-2.0

    Unpacked Size

    21 kB

    Total Files

    8

    Last publish

    Collaborators

    • jenlooper