https://github.com/wulfsolter/angular2-signaturepad

Angular2 Component for szimek / signature_pad
https://github.com/wulfsolter/angular2-signaturepad

Last synced: 3 months ago
JSON representation

Angular2 Component for szimek / signature_pad

• Host: GitHub
• URL: https://github.com/wulfsolter/angular2-signaturepad
• Owner: wulfsolter
• License: mit
• Archived: true
• Created: 2016-01-29T18:32:37.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2022-04-12T06:57:01.000Z (almost 3 years ago)
• Last Synced: 2024-11-09T08:45:02.781Z (3 months ago)
• Language: TypeScript
• Size: 4.82 MB
• Stars: 176
• Watchers: 13
• Forks: 157
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-ionic2-components - Signatur
• Awesome - Signatur

README

        
# angular2-signaturepad

Angular 2 component for [szimek/signature_pad](https://www.npmjs.com/package/signature_pad).

# No Longer Maintained

<< THIS IS NO LONGER IN USE BY OWNER. PROBLEMS CAN AND DO EXIST. PRs ARE SUPER WELCOME, BUT I CAN NOT IDENTIFY WHAT YOUR ISSUES ARE, NOR WILL I CHANGE THINGS BECAUSE ANGULAR HAS CHANGED IN THE YEARS SINCE I WROTE THIS. I DO NOT USE THIS, I CAN'T HELP YOU WITH YOUR PROBLEMS. >>

## Install

`npm install angular2-signaturepad --save`

## Reference Implementation

* [Live Demo](http://lathonez.com/angular2-signaturepad-demo/)

* [Source](https://github.com/lathonez/angular2-signaturepad-demo)

## Usage example

API is identical to [szimek/signature_pad](https://www.npmjs.com/package/signature_pad).

Options are as per [szimek/signature_pad](https://www.npmjs.com/package/signature_pad) with the following additions:

* canvasWidth: width of the canvas (px)

* canvasHeight: height of the canvas (px)

The above options are provided to avoid accessing the DOM directly from your component to adjust the canvas size.

```typescript

// import into app module

import { SignaturePadModule } from 'angular2-signaturepad';

...

@NgModule({

  declarations: [ ],

  imports: [ SignaturePadModule ],

  providers: [ ],

  bootstrap: [ AppComponent ]

})

// then import for use in a component

import { Component, ViewChild } from 'angular2/core';

import { SignaturePad } from 'angular2-signaturepad/signature-pad';

@Component({

  template: ''

})

export class SignaturePadPage{

  @ViewChild(SignaturePad) signaturePad: SignaturePad;

  signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor

    'minWidth': 5,

    'canvasWidth': 500,

    'canvasHeight': 300

  };

  constructor() {

    // no-op

  }

  ngAfterViewInit() {

    // this.signaturePad is now available

    this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime

    this.signaturePad.clear(); // invoke functions from szimek/signature_pad API

  }

  drawComplete() {

    // will be notified of szimek/signature_pad's onEnd event

    console.log(this.signaturePad.toDataURL());

  }

  drawStart() {

    // will be notified of szimek/signature_pad's onBegin event

    console.log('begin drawing');

  }

}

```