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