Package Exports

v-perfect-signature
v-perfect-signature/dist/v-perfect-signature.cjs.js
v-perfect-signature/dist/v-perfect-signature.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (v-perfect-signature) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

v-perfect-signature

Pressure-sensitive signature drawing for Vue 2 and 3 built on top of perfect-freehand.

Demo: https://wobsoriano.github.io/v-perfect-signature

Install

yarn add v-perfect-signature

Usage

<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.

Events

Name	Type	Default	Description
`onBegin`	Function	-	Fired when stroke begin
`onEnd`	Function	-	Fired when stroke end

Credits

perfect-freehand - Draw perfect pressure-sensitive freehand strokes.
signature_pad - HTML 5 canvas based smooth signature drawing.
vue-signature-pad - Vue wrapper of signature_pad.
vue-demi - Creates Universal Library for Vue 2 & 3