Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.

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

pnpm add v-perfect-signature

Usage

<script setup>
  import { ref } from 'vue';
  import VPerfectSignature from 'v-perfect-signature';

  const signaturePad = ref();
  const strokeOptions = {
    size: 16,
    thinning: 0.75,
    smoothing: 0.5,
    streamline: 0.5,
  };

  function toDataURL() {
    const dataURL = signaturePad.value.toDataURL();
    console.log(dataURL);
  }
</script>

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

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

License

MIT - Copyright (c) 2022 Robert Soriano