签名板不跟随光标 [英] Signature Pad does not follow cursor

问题描述

我正在使用 angular2-signaturepad 库在我的有角项目中使用签名.这是我的代码:

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?

推荐答案

我不得不调整画布的大小，然后，签名跟随签名板中的光标.

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);
  }

这篇关于签名板不跟随光标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！