Angular9 Signature Pad 问题：从笔触摸中绘制的签名偏移

问题描述

我使用 https://github.com/ramsatt/Angular9SignaturePad/tree/master/src/app/_componets/signature-pad 实现了一个签名板，它在较小的设备上运行良好，但在 iPad 或 7 英寸以上的更大设备上，它无法正常工作。 在屏幕上绘制时，生成的线条与用户触摸的位置有一个偏移（绘制的签名不会在用户绘制时直接出现在笔下）。 请问我该如何解决这个问题。

解决方法

所以我通过添加以下代码并在 ngOnInit 中调用它来修复它

resizeCanvas() {
   var width = this.signaturePadElement.nativeElement.width;
   var height = this.signaturePadElement.nativeElement.height;
   var ratio = Math.max(window.devicePixelRatio || 1,1);
   if (ratio <= 2) {
    this.signaturePadElement.nativeElement.width = width * ratio;
    this.signaturePadElement.nativeElement.height = height * ratio;
    this.signaturePadElement.nativeElement
    .getContext("2d")
    .scale(ratio,ratio);
}

然后做

 ngOnInit(){
  this.resizeCanvas()
 }

this.signaturePadElement 是您使用 ViewChild() 获得的元素