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

1. 问题

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

原因

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

解决方式

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

yarn add signature_pad@4.0.9

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

 "signature_pad": "4.0.9"

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

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

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

2.重新渲染后画布显示异常，不能重新输入

原因：可能是画布DOM节点拿不到，导致设置不了高宽。
可以在初始化时，设置默认值
initalHandle() {
const _canvasBox = proxy. $refs.canvasRef; const _canvas = proxy.$ refs.canvasMapRef;
const ratio = Math.max(window.devicePixelRatio || 1, 1);
if (!_canvasBox || !_canvas) {
return false;
}
_canvas.width = (_canvas.offsetWidth||300) * ratio;
_canvas.height = (_canvas.offsetHeight||200) * ratio;
_canvas.getContext("2d").scale(ratio, ratio);
proxy.clearCanvasHandle();
proxy.canvasNode = new SignaturePad(_canvas, {
minWidth: 2,
maxWidth: 2,
penColor: "rgb(0, 0, 0)",
});
proxy.canvasNode.on();
}