signaturepad 手写签名异常，笔画不随焦点

问题

半个月前开发H5手写签名插件，一切正常。今天合并预发布后发现手写签名异常，笔画没有显示。

原因

signaturepad版本更新了，不支持原来的写法。

解决方式

1. 采用原来的版本，不去默认更新到最新版。如我的版本是4.0.9

yarn add signature_pad@4.0.9

以及package.json中的插件版本会变成：

 "signature_pad": "4.0.9"

优点：不用去担心以后新版本更新对原来写法的影响

2. 修改原来初始化画布的方法

initalHandle() {
      const _canvasBox = this.$refs.canvasRef;
      const _canvas = this.$refs.canvasMapRef;
      const ratio = Math.max(window.devicePixelRatio || 1, 1);
      if (!_canvasBox || !_canvas) {
        return false;
      }

    _canvas.width = _canvas.offsetWidth * ratio;
    _canvas.height = _canvas.offsetHeight * ratio;
    _canvas.getContext("2d").scale(ratio, ratio);
      this.clearCanvasHandle();
      this.canvasNode = new SignaturePad(_canvas, {
        minWidth: 2,
        maxWidth: 2,
        penColor: "rgb(0, 0, 0)",
      });
    },

优点：新版本新加的功能也可以使用

插件官网地址：https://www.npmjs.com/package/signature_pad