signature_pad画线签字位点与实际不符

最新推荐文章于 2025-04-11 09:27:50 发布

LingRuiBin

最新推荐文章于 2025-04-11 09:27:50 发布

阅读量427

点赞数 3

文章标签： vue SignaturePad

本文链接：https://blog.youkuaiyun.com/qq_29484537/article/details/138216295

版权

未修改前效果：手指按压下位置与实际位置偏差很大
在这里插入图片描述

初始化修改为以下代码：

 const _canvas = this.$refs.signatureCanvas;
    const ratio = Math.max(window.devicePixelRatio || 1, 1);
    _canvas.width = _canvas.offsetWidth * ratio;
    _canvas.height = 300 * ratio;
    _canvas.getContext("2d").scale(ratio, ratio);
    this.signaturePad = new SignaturePad(_canvas, {
      // backgroundColor: "rgba(236,151,66,0.09)"
      width: window.innerWidth + ratio,
      minDistance: 2
    });