npm.io
1.1.3 • Published 8 years ago

vue-sign-canvas

Licence
Version
1.1.3
Deps
2
Vulns
3
Weekly
0

vue-signature

Vue signature component

this component is based on Fabric, a great lib to deal with canvas

How to install

  • npm install vue-sign-canvas

How to use

import VueSignCanvas from 'vue-sign-canvas'
require('vue-sign-canvas/dist/vue-sign-canvas.min.css')
Vue.component('VueSignCanvas', VueSignCanvas)

const options = {
  width: 500,
  height: 500,
  brushColor: '#000',
  brushWidth: 10,
  shadowEnable: false,
  shadowWidth: 10,
  canvasBackgroundColor: '#fff',
  brushType: 'ink'
}

function saveResult (data) {

}
function clear () {

}
<div>
  <VueSignCanvas :options="options" @result="saveResult" @clear="clear" />
<div>

options

name type defaultValue description
brushColor string '#000' set brush color
brushWidth number 10 set brush width
brushType string default('ink','crayon','marker') change brush type
width number document.documentElement.clientWidth set canvas width
height number document.documentElement.clientHeight set canvas height
shadowEnable boolean false set brush shadow enable or not
shadowWidth number 10 set shadow width
shadowColor string null set shadow color