# @o.krucheniuk/ngx-signature-pad

> Angular 9 library for drawing smooth signatures, based on [signature_pad](https://www.npmjs.com/package/signature_pad).

Latest version **0.0.7** (published 2020-12-14) · 0 weekly downloads

## Install

```sh
npm install @o.krucheniuk/ngx-signature-pad
pnpm add @o.krucheniuk/ngx-signature-pad
yarn add @o.krucheniuk/ngx-signature-pad
bun add @o.krucheniuk/ngx-signature-pad
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2020-12-14 |
| First published | 2020-03-13 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 49 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | o.krucheniuk |

## Links

- npm: https://www.npmjs.com/package/@o.krucheniuk/ngx-signature-pad
- Homepage: https://gitlab.com/alexandr.krucheniuk/ngx-signature-pad
- Issues: https://gitlab.com/alexandr.krucheniuk/ngx-signature-pad/-/issues
- npm.io page: https://npm.io/package/@o.krucheniuk/ngx-signature-pad

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^1.10.0
- [signature_pad](https://npm.io/package/signature_pad.md) ^3.0.0-beta.3

## Recent versions

- 0.0.7 (latest) — 2020-12-14
- 0.0.6-4 — 2020-12-14
- 0.0.6-3 — 2020-11-16
- 0.0.6-2 — 2020-11-16
- 0.0.6-1 — 2020-11-16
- 0.0.6 — 2020-11-16
- 0.0.5 — 2020-03-14
- 0.0.4 — 2020-03-13
- 0.0.3 — 2020-03-13
- 0.0.2 — 2020-03-13
- 0.0.1 — 2020-03-13

## README

# NgxSignaturePad
Angular 9 library for drawing smooth signatures, based on [signature_pad](https://www.npmjs.com/package/signature_pad).

### Usage:
Install package

`npm i @o.krucheniuk/ngx-signature-pad -D`

#### Import NgxSignaturePadModule into app.module.ts

`import {NgxSignaturePadModule} from '@o.krucheniuk/ngx-signature-pad';
  imports: [
    SharedModule,
    BrowserModule,
    NgxSignaturePadModule
  ],`
  
#### Use component:

#### Add into app.component.html :

`<ngx-signature-pad [config]="config" #testPad></ngx-signature-pad>`

#### Add into app.component.ts:

`@ViewChild('testPad', {static: true}) signaturePadElement: NgxSignaturePadComponent;`
 
`config: SignaturePadOptions = {
  minWidth: 1,
  maxWidth: 10,
  penColor: 'blue'
};`

### Stackblitz example

https://stackblitz.com/edit/ngx-signature-pad

#### API
API is accessable via this.signaturePadElement
#### Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
toDataURL(); // save image as PNG
toDataURL("image/jpeg"); // save image as JPEG
toDataURL("image/svg+xml"); // save image as SVG
 
// Draws signature image from data URL.
// NOTE: This method does not populate internal data structure that represents drawn signature. Thus, after using #fromDataURL, #toData won't work properly.
fromDataURL("data:image/png;base64,iVBORw0K...");
 
// Returns signature image as an array of point groups
toData();
 
// Draws signature image from an array of point groups
fromData(data);
 
// Clears the canvas
clear();
 
// Returns true if canvas is empty, otherwise returns false
isEmpty();
 
// Unbinds all event handlers
off();
 
// Rebinds all event handlers
on();
 
// Force re-render of the signature canvas. Method also clears canvas
forceUpdate();
Config options
dotSize : (float or function) Radius of a single dot.

minWidth: (float) Minimum width of a line. Defaults to 0.5.

maxWidth: (float) Maximum width of a line. Defaults to 2.5.

throttle: (integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.

minDistance: (integer) Add the next point only if the previous one is farther than x pixels. Defaults to 5.

backgroundColor: (string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.

penColor: (string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".

velocityFilterWeight: (float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.


### Notes:
Canvas used for drawing is responsive. To limit it size add static dimensions for parent element of ngx-signature-pad

---
_Source: https://npm.io/package/@o.krucheniuk/ngx-signature-pad · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._