vue-sign-canvas

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