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

【问题标题】：Canvas drawing disappears on zoom in/out画布绘图在放大/缩小时消失
【发布时间】：2018-11-12 13:46:10
【问题描述】：

我的应用程序中有一个 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();

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

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

【问题讨论】：

改变画布元素的宽度和高度会使绘图消失。可以改用css规则设置宽高吗？
设置 canvas.width 或 canvas.height 将清除缓冲区。您需要复制图像数据。
你的代码没有放大，只有调整大小，它有很大的不同。对于缩放 yoy 可以定义缩放 1，全质量级别。对于调整大小，它更复杂......你希望它如何准确地工作？假设您的用户从一个 100 x 100 的画布开始，在其上绘制了一些填充所有区域的绘图，然后将大小调整为 1000 x 1000。所有 1000 x 1000 是否应该由先前绘图的调整大小的副本填充，或者应该只为当前绘图区域创建更多空间？如果是前者，你如何处理纵横比的变化？如果是后者缩水怎么处理。

标签： javascript jquery html canvas

【解决方案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);

但是当我们缩小并尝试放大回签名板时，它不能正常工作

【讨论】：