Sep

Pressure Sensitive Signature Drawing for Vue 2 and 3

vue-js

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

Name	Type	Default	Description
width	String	100%	Set canvas width
height	String	100%	Set canvas height
backgroundColor	String	rgba(0,0,0,0)	Canvas background color
penColor	String	#000	Canvas pen color
strokeOptions	Object	Reference	Perfect freehand options

Methods

Name	Argument Type	Description
toDataURL(type)	String	Returns signature image as data URL
fromDataURL(dataUri)	String	Draws signature image from data URL
toData	-	Returns signature image as an array of array of input points
fromData(data)	Array	Draws signature image from array of array of input points
clear()	-	Clears the canvas
isEmpty()	-	Returns true if canvas is empty
resizeCanvas(shouldClear)	Boolean	Resizes and recalculate dimensions

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.

Published at : 13-09-2021

AUTHOR

Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Blog Detail