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:
v1.1.11 (12/03/2022)
- Bugfix
03/07/2022
- bugfix
03/04/2022
- Update
02/25/2022
- Update dependencies
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