Pressure Sensitive Signature Drawing for Vue 2 and 3

Robert Soriano introduced a Pressure-sensitive signature drawing for Vue 2 and Vue 3 built on top of perfect-freehand. V perfect signature allows you to draw your signature effortlessly. It also provides many customizable options like font size, stroke thining, pen color, etc. You can view its demo here.

Installation

You can install this package via npm or yarn.

Npm

npm i v-perfect-signature

Yarn

yarn add v-perfect-signature

Usage

After the installation, you can import this package into your vue component.

<template>
  <VPerfectSignature :stroke-options="strokeOptions" ref="signaturePad" />
</template>

<script lang="ts">
import Vue from 'vue'
import VPerfectSignature, { StrokeOptions } from 'v-perfect-signature'

export default Vue.extend({
  components: {
    VPerfectSignature
  },
  data: () => ({
    strokeOptions: {
        size: 16,
        thinning: 0.75,
        smoothing: 0.5,
        streamline: 0.5
    } as StrokeOptions
  }),
  methods: {
    toDataURL() {
        const dataURL = this.$refs.signaturePad.toDataURL()
        console.log(dataURL)
    }
  }
})
</script>

Props

Methods

Note: Like signature_pad, fromDataURL does not populate internal data structure. Thus, after using fromDataURL, toData won’t work properly.

If you want to utilize this package you can visit its full documentation on github.