手机上的签名板。从光标沿 X 和 Y 轴绘制几厘米的距离答案

【问题标题】：Signature Pad on mobile. Draws a distance of several centimeters along the X and Y axes from the cursor手机上的签名板。从光标沿 X 和 Y 轴绘制几厘米的距离
【发布时间】：2018-08-06 16:04:34
【问题描述】：

我已在网站上实施了数字签名。在浏览器中，一切正常。切换到移动视图时会出现问题。在模拟器 Chrome 和移动设备中测试。由于某种原因，这条线被绘制在离光标一定距离的地方。这会导致在画布外部绘制线条，并且 signaturePad.isEmpty() 返回 false。结果是一个空签名。有人能遇到类似的吗？

【问题讨论】：

标签： javascript signaturepad

【解决方案1】：

https://github.com/szimek/signature_pad#handling-high-dpi-screens

以下文档适用于我的应用程序。

function resizeCanvas() {
  var ratio =  Math.max(window.devicePixelRatio || 1, 1);
  canvas.width = canvas.offsetWidth * ratio;
  canvas.height = canvas.offsetHeight * ratio;
  canvas.getContext("2d").scale(ratio, ratio);
  signaturePad.clear(); // otherwise isEmpty() might return incorrect value
}

window.addEventListener("resize", resizeCanvas);
resizeCanvas();

【讨论】：

是的，它在网页上运行良好。但是当切换到移动视图时，问题并没有解决
如果你设置视口会修复它吗？ <meta name="viewport" content="width=device-width, initial-scale=1">。 developer.mozilla.org/en-US/docs/Mozilla/Mobile/…
问题解决了。原因在于属性 css ZOOM
我也面临这个问题。但是我需要“缩放”/“转换”属性来查看已经在桌面上绘制的移动视图中的整个图像。你能给出任何解决方案吗？

【解决方案2】：

我必须在使用 window.setTimeout 执行的方法中执行调整画布大小的逻辑。我只延迟了 50 毫秒，但到那时缩放总是正确的。

【讨论】：