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); 
}

绘图应用撤消按钮

1 个答案: