Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wobsoriano/v-perfect-signature
Pressure-sensitive signature drawing for Vue 2 and 3
https://github.com/wobsoriano/v-perfect-signature
canvas drawing html-canvas signature
Last synced: 2 days ago
JSON representation
Pressure-sensitive signature drawing for Vue 2 and 3
- Host: GitHub
- URL: https://github.com/wobsoriano/v-perfect-signature
- Owner: wobsoriano
- License: mit
- Created: 2021-07-24T14:20:21.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-12-14T05:37:32.000Z (about 1 year ago)
- Last Synced: 2024-10-30T05:57:40.408Z (3 months ago)
- Topics: canvas, drawing, html-canvas, signature
- Language: TypeScript
- Homepage: https://wobsoriano.github.io/v-perfect-signature/
- Size: 791 KB
- Stars: 251
- Watchers: 5
- Forks: 22
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# v-perfect-signature
Pressure-sensitive signature drawing for Vue 2 and 3 built on top of [perfect-freehand](https://github.com/steveruizok/perfect-freehand).
Demo: https://wobsoriano.github.io/v-perfect-signature
## Install
```bash
pnpm add v-perfect-signature
```
## Usage
```vue
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)
}
```
## 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](https://github.com/steveruizok/perfect-freehand#options) | Perfect freehand options |
## Methods
| Name | Argument Type | Description |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
| `toDataURL(type)` | [String](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) | Returns signature image as data URL |
| `fromDataURL(dataUri)` | [String](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) | Draws signature image from data URL |
| `toData` | - | Returns signature image as an array of array of input points |
| `fromData(data)` | [Array](https://github.com/wobsoriano/v-perfect-signature/blob/master/packages/lib/src/components/__tests__/mock.ts#L1) | 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](https://github.com/szimek/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 |
## Nuxt
```js
export default defineNuxtConfig({
build: {
transpile: ['v-perfect-signature']
}
})
```
## License
MIT