将画布数据保存到数组时出现问题

Question

我正在使用HTML5画布创建一个Web应用程序来绘制图像(比如绘制web),我尝试实现"撤消"(ctrl + Z)和"重做"功能,这里我面临着一个画布元素数组的奇怪问题.有时,当我按下ctrl + Z进行撤消时,会出现一个空白图像,但是数据在数组中并且我指向正确的元素(因为当我使用undo/redo时,我设法以正确的顺序校正图像).

如果你能看看下面的代码,我将不胜感激,我已经花了很多时间,我无法找到问题...... :-(

function Stack(firstImg , size) {
    var drawStack = new Array();
    var stackIndex = 0;
    var stackTop = 0;
    var stackFloor = 0;
    var stackSize = size; 

    drawStack[0] = firstImg;

    this.add = function() {
        drawStack[++stackIndex%stackSize] = cvs.toDataURL("image/png");
        if (stackIndex >= stackSize) stackFloor = (stackIndex +1) % stackSize ;
        stackTop = stackIndex % stackSize;
    }

    this.undo = function () {
        if (stackIndex%stackSize == stackFloor ) return;
        clearCanvas();
        var tmpImg = new Image();
        tmpImg.src = drawStack[--stackIndex%stackSize];
        cvsCtx.drawImage(tmpImg, 0, 0);

    }

    this.redo = function () {
        if (stackIndex%stackSize == stackTop) return;
        clearCanvas();
        var tmpImg = new Image();
        tmpImg.src = drawStack[++stackIndex%stackSize];
        cvsCtx.drawImage(tmpImg, 0, 0);
    }
} 

任何解决方案或解决方法,我会采取,非常感谢你!

Answer 1

我已经实现了几次撤消/重做功能,虽然由于许可原因我无法发布代码,但我可以给你一些伪造的代码,它应该演示实际上简单的undo/redo:

首先,你需要两个数组.称这些为"撤消"和"重做".

每次状态更改时,将该状态推送到撤消堆栈.

当用户按下ctrl-z(撤消)时,从撤消堆栈中弹出上次保存的状态.将此状态推送到重做队列,并使其成为当前状态.

当用户按下ctrl-y(重做)时,从重做队列中弹出上次保存的状态.

如果任一阵列开始填满您想要保存的状态数,请使用shift来丢弃最旧的状态.

有关push,pop和shift的参考,请参阅MDN文档.

此外,您可能会发现自己希望阵列有窥视,所以这里是:

Array.prototype.peek = function () {
    var theArray = this;
    var temp = theArray.pop();

    if (temp !== undefined) {
        theArray.push(temp);
    }

    return temp;
};

编辑:我的代码片段中有一个错误,在空数组上调用.peek()将推送未定义.