Description:
A pressure-sensitive signature drawing library for Vue 2/3, based on the perfect-freehand, which enables you to draw perfect pressure-sensitive freehand strokes.
How to use it:
1. Install and import the v-perfect-signature component.
import Vue from 'vue'
import VPerfectSignature, { StrokeOptions } from 'v-perfect-signature'2. Insert the signature pad into the template.
<VPerfectSignature :stroke-options="strokeOptions" ref="signaturePad" />
export default Vue.extend({
components: {
VPerfectSignature
},
data: () => ({
strokeOptions: {
// refer to https://github.com/steveruizok/perfect-freehand#options
} as StrokeOptions
}),
methods: {
toDataURL() {
const dataURL = this.$refs.signaturePad.toDataURL()
console.log(dataURL)
}
}
})3. Default component props.
width: {
type: String,
required: false,
default: DEFAULT_WIDTH
},
height: {
type: String,
required: false,
default: DEFAULT_HEIGHT
},
backgroundColor: {
type: String,
required: false,
default: DEFAULT_BACKGROUND_COLOR
},
penColor: {
type: String,
required: false,
default: DEFAULT_PEN_COLOR
},
strokeOptions: {
type: Object as PropType<StrokeOptions>,
required: false,
default: {}
}4. API methods.
// convert signature image to data URL toDataURL(type) // draw signature from data URL fromDataURL(dataUri) // convert signature image into an array of input points toData // draw signature image from an array of input points fromData(data) // clear the canvas clear() // check if the canvas is empty isEmpty(); // resize the canvas resizeCanvas(shouldClear)
5. Events.
- @onBegin
- @onEnd
Preview:
Changelog:
09/11/2021
- Update dependencies
08/31/2021
- Update default prop value
Download Details:
Author: wobsoriano
Live Demo: https://wobsoriano.github.io/v-perfect-signature/
Download Link: https://github.com/wobsoriano/v-perfect-signature/archive/refs/heads/master.zip
Official Website: https://github.com/wobsoriano/v-perfect-signature
Install & Download:
# Yarn
$ yarn add v-perfect-signature
# NPM
$ npm i v-perfect-signature --save