Angular9 签名板问题：从笔触摸绘制的签名偏移答案

【问题标题】：Angular9 Signature Pad issue: Signature drawn offset from pen touchAngular9 签名板问题：从笔触摸绘制的签名偏移
【发布时间】：2021-09-07 13:02:57
【问题描述】：

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

【问题讨论】：

您是否在更大的设备/屏幕上使用 CSS 调整键盘的大小？
@ihorbond 我不认为我在这样做。如何实现？
这完全是另一种蠕虫。我建议在屏幕上保持垫尺寸相同。通过 css 调整它的大小将导致你所描述的，因为实际 html 画布的大小没有改变。您可以更改画布大小，但这会删除签名，因此必须重新绘制。现在因为您在更大的画布上绘制原始签名，它可能看起来会变形/模糊。

标签： ionic-framework ionic5 signaturepad

【解决方案1】：

所以我通过添加以下代码并在 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() 获得的元素

【讨论】：