CODEWITHSUNDEEP
angularionic-frameworksignaturepad
Setu Kumar Basak
Setu Kumar Basak

Reputation: 12022

Signature Pad does not follow cursor

I am using angular2-signaturepad library to work with signature in my angular project. Here is my code:

signature.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SignaturePage } from './signature';
import { SignaturePadModule } from 'angular2-signaturepad';

@NgModule({
  declarations: [
    AssinarPage,
  ],
  imports: [
    IonicPageModule.forChild(AssinarPage),
    SignaturePadModule
  ],
})
export class SignaturePageModule {}

signature.ts

export class SignaturePage {
  @ViewChild(SignaturePad) private signaturePad : SignaturePad;
   signaturePadOptions = {
      minWidth: 0.4,
      maxWidth: 1.5,
      dotSize: 1.5,
      penColor: "DarkBlue",
      /* INVERSE BECAUSE IT IS SHOW ONLY IN LANDSCAPE */
      canvasWidth: platform.height(),
      canvasHeight: platform.width() + 30
    }

    drawComplete () {
    if (this.signaturePad.isEmpty()) {
      return this.alertService.showError('Sign first.');
    }

    this.signatureImage = this.signaturePad.toDataURL();
  }

  drawClear () {
    this.signaturePad.clear();
  }

signature.html

<signature-pad [options]="signaturePadOptions" id="signatureCanvas" drag-content="false" ></signature-pad>

I saw the live demo of this library in this link and it is working perfectly here. But in my project, signature is not following the cursor.

Is there any configuration i need to change, so the signature follows the cursor in the signature pad?

Upvotes: 0

Views: 3276

Answers (2)

Abrar Yousuf
Abrar Yousuf

Reputation: 1

//Responsive signature pad removes signature if drawn again on the same canvas. Below are the lines added to tackle that

const data = signaturePad.toData();  // saves the previously drawn canvas to local    variable

// lines below makes the cursor responsive to all screen sizes
let canvas = document.querySelector('canvas');
signaturePad.set('minWidth', 1);
signaturePad.set('canvasWidth', canvas.offsetWidth);
signaturePad.set('canvasHeight', canvas.offsetHeight);

signaturePad.fromData(data,{ clear: false });  // disallows the clearing of the canvas while drawing something again on the same canvas

Upvotes: 0

Setu Kumar Basak
Setu Kumar Basak

Reputation: 12022

I had to resize the canvas and after that, signature followed the cursor in the signature pad.

  canvasResize() {
    let canvas = document.querySelector('canvas');
    this.signaturePad.set('minWidth', 1);
    this.signaturePad.set('canvasWidth', canvas.offsetWidth);
    this.signaturePad.set('canvasHeight', canvas.offsetHeight);
  }

Upvotes: 2

Related Questions