绘图应用程序撤消按钮

Question

我的绘图应用程序的撤消按钮有问题

<input id="undo" type="image" src="images/undo.ico" onclick="cUndo()" width="25" height="25">

var cPushArray = new Array();
var cStep = -1;
var ctx;
// ctx = document.getElementById('myCanvas').getContext("2d");

function cPush() {
    cStep++;
    if (cStep < cPushArray.length) { cPushArray.length = cStep; }
    cPushArray.push(document.getElementById('myCanvas').toDataURL());
}
function cUndo() {
    if (cStep > 0) {
        cStep--;
        var canvasPic = new Image();
        canvasPic.src = cPushArray[cStep];
        canvasPic.onload = function () { ctx.drawImage(canvasPic, 0, 0); }
    }
}

但这不起作用。请帮助

Answer 1

第一条评论：正如@markE 强调的那样，使用 DataURL 保存具有很高的内存成本。您可以考虑将绘图命令及其参数保存在一个数组中。
寻找关于该主题的 tuts/Stack Overflow 帖子，从一些帖子中你应该得到一些好主意。

无论如何，您可以在第一次使用 dataURL 解决方案以使您的应用程序正常工作（限制为 20 次撤消或避免内存爆炸），然后您可以稍后改进撤消以达到更高的限制。 我更新了我的代码来处理这样的堆栈限制。

对于您的问题：应该在设置 src 之前挂钩 onload，但无论如何使用 DataURL 您不是异步的：图像是立即构建的，因此无需挂钩卸载。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");

var historic = [];
var maxHistoricLength = 20; // might be more or less, depending on canvas size...

function saveForUndo() {
    historic.push(canvas.toDataURL());
    if (historic.length === maxHistoricLength +1) historic.shift(); 
}

function canUndo() {
  return (historic.length !== 0 );
}

function undo() {
    if (!canUndo()) return;
    var lastDataURL = historic.pop();
    var tmpImage = new Image();
    tmpImage.src = lastDataURL;
    ctx.drawImage(tmpImage, 0, 0); 
}