Question

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

目前，我使用getImageData和putImageData复制较小的画布，并在画布放大后重绘。这在一定程度上工作得很好。

问题在于，在较大的画布上绘制并恢复到较小的画布时，自然会切断部分数据。再次，不是问题。但是，因为我在画布上使用getImageData，如果我要切换到全屏AGAIN，它将只复制较小画布中可见的数据。这就是问题所在。

无论我处于哪种观点，我希望保留绘图数据。

有什么想法吗？

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

最终到达那里，正确与否！ :) 我最终做的是最初创建一个大画布，并限制它的容器溢出。然后，点击＆＃39; sizer＆＃39;图标，有效地揭示剩余的画布。很简单，但它确实有效。

我尝试了getImageData和drawImage()，但我并没有真正起作用。也许我只是不完全理解他们！但无论如何，如果有人有类似的问题，我想我会分享。

Canvas使用getImageData调整大小

1 个答案: