问题
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?
回答1:
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);
}
来源:https://stackoverflow.com/questions/48782913/signature-pad-does-not-follow-cursor