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 |
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 1.1.3 | ^2.5.2 | ||
| 1.1.2 | ^2.5.2 | ||
| 1.1.1 | ^2.5.2 | ||
| 1.1.0 | ^2.5.2 | ||
| 1.0.9 | ^2.5.2 | ||
| 1.0.8 | ^2.5.2 | ||
| 1.0.7 | ^2.5.2 | ||
| 1.0.6 | ^2.5.2 | ||
| 1.0.5 | ^2.5.2 | ||
| 1.0.4 | ^2.5.2 | ||
| 1.0.3 | ^2.5.2 | ||
| 1.0.2 | ^2.5.2 | ||
| 1.0.1 | ^2.5.2 | ||
| 1.0.0 | ^2.5.2 |