Pressure-sensitive Signature Drawing Library For Vue 2/3

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