Question

我的应用程序中有一个HTML画布。当用户在该画布上绘制某些东西并执行放大/缩小时，它将清除该画布上的绘图。

var wrapper = document.getElementById("signature-pad");
var canvas = wrapper.querySelector("canvas");

var signaturePad = new SignaturePad(canvas, {
  backgroundColor: 'rgb(255, 255, 255)'
});

function resizeCanvas() {   
  var ratio = Math.max(window.devicePixelRatio || 1, 1);
  canvas.width = canvas.offsetWidth * ratio;
  canvas.height = canvas.offsetHeight * ratio;
  canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

有没有一种方法可以使绘图保持原样，即使我们执行放大或缩小大小

我尝试了内存部分，但是它降低了绘图质量

Answer 1

在调整大小之前先从画布中读取图像，然后再写回图像会有所帮助。

var data = signaturePad.toDataURL();    
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
signaturePad.clear();
signaturePad.fromDataURL(data);

但是当我们缩小并尝试向后放大签名板时无法正常工作

画布图在放大/缩小时消失

1 个答案: