V-perfect-signature-no-types NPM

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

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

License

vue signature pad freehand

perfect-freehand vue-demi

@infinitebrahmanuniverse/nolb-v-p @everything-registry/sub-chunk-3037

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago