4

我正在尝试为画布实现撤消功能。基本上人们可以在画布上绘画，然后将其恢复到之前的状态。这就是理论。每次调用函数 draw 时，我都会保存当前的 imageData。它保存在数组 eD(namespace).history 中。绘图工作正常，即使我操作 imageData。这是我的绘图函数（cD 也是一个命名空间）：

editorClass.prototype.draw = function(){
    eD.history.push(cD.imageData);
    cD.context.putImageData(cD.imageData, 0, 0);
}

现在，如果我尝试撤消我在两者之间所做的更改，我会使用一个名为 undo 的函数，它看起来像这样：

editorClass.prototype.undo = function(){
    var temp = eD.history.pop();
    cD.context.createImageData(cD.width,cD.height); //Can leave this out, nothing changes
    cD.context.putImageData(temp, 0, 0);
}

如上所述，这是行不通的。我使用的画布是在用户加载网站后创建的。cD.imageData 源自此函数：

editorClass.prototype.getPixels = function(){
    cD.imageData = cD.context.getImageData(0, 0, cD.width, cD.height);
    // get the image data of the context and save them into namespace
    cD.pixels = cD.imageData.data;
    // get the pixels

    cD.pixelsLength = cD.width * cD.height * 4;
    // precompute the length of the pixel array
}

如果需要，两个命名空间都是可见的。由于我对画布还很陌生，所以这可能是一个简单的问题 - 所以如果你有改进：我是一个空的，请填写我;）

谢谢

4

1 回答 1

3

在没有看到所有代码的情况下，我不确定为什么你的代码不起作用，但我怀疑这是因为只尝试putImageData使用像素数组而不是图像数据对象。

这是我写的一个有效的演示

现场演示

这是相关的代码

var savedData = [];   

undoButt.addEventListener("click", function () {
    // as long as there is data put it onto the canvas.
    if (savedData.length > 0) {
        var imgData = savedData.pop();
        drawCtx.putImageData(imgData, 0, 0);
    }
});

drawCanvas.addEventListener("mousedown", function (e) {
    // push the current state
    var imgData = drawCtx.getImageData(0, 0, drawCanvas.width, drawCanvas.height);
    savedData.push(imgData);

});

它与您使用的概念相同，它似乎可以正常工作。

于 2013-08-08T22:57:49.783 回答