vue-paintable

With this vue plugin and component you can add a paintable canvas through your page. All paintings are saved by default into localStorage.

View Demo Download Source

How to use?

npm install vue-paintable

or

yarn add vue-paintable

Inside your main (typically main.js)

import Vue from 'vue';
import Paintable from 'vue-paintable';

Vue.use(Paintable, {
  // optional methods
  setItem(key, image) {
    localStorage.setItem(key, image);
  },
  // you also can use async
  getItem(key) {
    return localStorage.getItem(key);
  },
  removeItem(key) {
    localStorage.removeItem(key);
  }
});
//...

Inside your components

<template>
  <paintable
    alwaysOnTop
    :active="isActive"
    :width="800"
    :height="800"
    :disableNavigation="disableNavigation"
    :hide="hidePaintable"
    :horizontalNavigation="true"
    :navigation="navigation"
    :name="isFirstPaintable ? 'my-screen' : 'my-second-screen'"
    :factor="1"
    :lineWidth="dynamicLineWidth"
    :lineWidthEraser="20"
    :useEraser="useEraser"
    :color="color"
    class="paint"
    ref="paintable"
    @toggle-paintable="toggledPaintable"
  >
    Your content
    <router-view></router-view>
  </paintable>
</template>

Set your own navigation content by adding an object to your <paintable> component.

{
  'draw-save': {
    body: 'draw',
    activeBody: '<strong>save</strong>'
  },
  color: {
    body: 'CP'
  }
}

Display navigation horizontal

To display the navigation horizontally add horizontalNavigation to prop list.

Available navigation items:

  • color
  • line-width
  • undo
  • redo
  • delete
  • cancel

has active state (activeBody):

  • draw-save
  • eraser-pencil

Custom Navigation

To use a custom navigation disable the default navigation with disableNavigation.

use $refs to call paintable methods

<paintable ref="paintable">content</paintable>

<button @click="$refs.paintable.undoDrawingStep">undo</button>
<button @click="$refs.paintable.redoDrawingStep">redo</button>
<button @click="$refs.paintable.clearCanvas">clear</button>
<button @click="$refs.paintable.saveCurrentCanvasToStorage">
  save
</button>
<button @click="$refs.paintable.cancelDrawing">cancel</button>

Take a look at the demo (/src/App.vue)

Props

name type required default description
name string - required true - unique identifier
showUndoRedo boolean false true show undo and redo button
hide boolean false false hide the complete paintable
colors Array of colors (rgb, hex etc.) false ['black', '#f00', '#4481c7', 'rgba(255, 235, 59, 0.4)', '#999', 'green'] array of choosable colors
width number false window.innerWidth canvas width
height number false window.innerHeight canvas height
showLineWidth boolean false true show button to set line width
lineWidth number false 5 line width
alwaysOnTop boolean false true set canvas always as top layer
factor number false 1 set a scale factor if needed
lineWidthEraser number false 20 set eraser line width
horizontalNavigation boolean false true display the navigation horizontally or vertically
disableNavigation boolean false false hide navigation
active boolean false false set paintable active/inactive
color string false #000 current color
useEraser boolean false false set to true, to use the eraser
threshold number false 0 set the threshold on which an event gets triggered (see events)

Events

name type description
toggle-paintable boolean Is emitted, when changing paintable state
thresholdReached boolean Is emitted, when the speciefied threshold is reached 
<paintable @toggle-paintable="toggledPaintable"></paintable>

<paintable :threshold="10" @thresholdReached="thresholdReached"></paintable>

development

If you want to develop with this plugin, follow these steps:

  • clone repo
  • run yarn install or npm install
  • run yarn serve or npm run serve

build

You can find all built files inside the dist folder.

  • run yarn build or npm run build

GitHub