用getImageData调整画布大小

Question

我正在开发一个应用程序，允许用户使用触摸/手写笔在画布上进行物理绘制。界面的一部分是一个“调整大小的按钮”，它增加了画布的大小，以填充整个屏幕，从而允许更多的房地产。

目前，我正在使用getImageData和putImageData复制较小的画布，并在画布扩大后重新绘制。这在一定程度上适用于fine...to。

问题在于，当在较大的画布上绘图并返回到较小的画布时，自然会切断部分数据。再说一次，没问题。但是，当我在画布上使用getImageData时，如果我再次切换到全屏，它只会复制在较小的画布中可见的数据。这就是问题所在。

我想要的是，无论我在哪一个视图中，绘图数据都保持不变。

有什么想法吗？

PS。不好意思，我把香草和jQuery混合在一起，我正在快速地尝试别人的建议。

另外，sizer是“调整大小”按钮。draw是我的画布ID，right-panel包装我的画布。

var panelWidth = $(".right-panel").width();
var panelHeight = $(".right-panel").height();

var c = document.getElementById("draw");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, panelWidth, panelHeight);

$(".sizer").click(function(){
    var imgData = ctx.getImageData(0, 0, panelWidth, panelHeight);
    $('.right-panel').toggleClass('huge');
    var width = $(".right-panel").css("width");
    var height = $(".right-panel").css("height");
    var el = $("canvas");
    el.attr("width", width);
    el.attr("height", height);
    panelWidth = $(".right-panel").css("width").replace(/[^-\d\.]/g, '');
    panelHeight = $(".right-panel").css("height").replace(/[^-\d\.]/g, '');
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, panelWidth, panelHeight);
    ctx.putImageData(imgData, 0, 0);
});

Answer 1

最终，不管正确与否，我最终所做的是创建一个大画布，并限制它的容器溢出。然后，当点击'sizer‘图标，有效地揭示剩余的画布。很简单，但很管用。

我尝试过getImageData和drawImage()，但这两种方法都不适合我。也许我只是不完全理解他们！但不管怎么说，万一有人有类似的问题，我也会同意的。