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

Question

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

Answer 1

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

Answer 2

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