Pressure-sensitive Signature Drawing Library For Vue 2/3

Install & Download:

# Yarn
$ yarn add v-perfect-signature
# NPM
$ npm i v-perfect-signature --save

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:

v1.4.0 (12/14/2023)

• bugfix

v1.3.0 (09/30/2023)

• Update

v1.2.1 (06/23/2023)

• feat: allow locking and unlocking of signature

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