1. 問題
半個月前開發(fā)H5手寫簽名插件碌嘀，一切正常。今天合并預(yù)發(fā)布后發(fā)現(xiàn)手寫簽名異常歪架，筆畫沒有顯示股冗。
原因
signaturepad版本更新了，不支持原來的寫法和蚪。
解決方式
- 采用原來的版本止状，不去默認(rèn)更新到最新版。如我的版本是4.0.9
yarn add signature_pad@4.0.9
以及package.json中的插件版本會變成：
"signature_pad": "4.0.9"
優(yōu)點：不用去擔(dān)心以后新版本更新對原來寫法的影響
- 修改原來初始化畫布的方法
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)",
});
},
優(yōu)點：新版本新加的功能也可以使用
插件官網(wǎng)地址：https://www.npmjs.com/package/signature_pad
2.重新渲染后畫布顯示異常攒霹，不能重新輸入
原因：可能是畫布DOM節(jié)點拿不到怯疤，導(dǎo)致設(shè)置不了高寬。
可以在初始化時催束，設(shè)置默認(rèn)值
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();
}
