キャンバスデータを配列に保存する際の問題

Question

HTML5キャンバスを使用して画像を描画するWebアプリケーションを作成しています（「Ctrl + Z」および「やり直し」機能を実装しようとしています。キャンバス要素の配列に奇妙な問題があります。 Ctrl + Zキーを押して元に戻すと、空の画像が表示されますが、データは配列内にあり、正しい要素を指しています（元に戻す/やり直して再生すると、注文）。

あなたは、私は感謝される、次のコードを見て持つことができる場合、私はすでに多くの時間を費やしてきたと私は、問題を見つけることができないんだが... :-(

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

任意のソリューションまたは回避策、私がかかりますが、私はUNDO/REDO機能を数回実施していると、私はライセンス上の理由のためのコードを投稿することはできませんが、私はあなたにその必要のあるいくつかの擬似コードを与えることができます

Answer 1

!!どうもありがとうございました元に戻す/やり直しが実際にどの程度簡単かを示します。

最初に、あなたはn 2つの配列をeedします。これらの "元に戻す"と "やり直す"と呼んでください。

状態が変わるたびに、その状態を元に戻すスタックにプッシュします。

ユーザがctrl-z（元に戻す）を押すと、最後に保存した状態を元に戻すスタックからポップします。この状態をREDOキューにプッシュし、現在の状態にします。

ユーザがctrl-y（やり直し）を押すと、最後に保存された状態をやり直しキューからポップします。

いずれかの配列が保存したい状態数を超えていった場合は、シフトを使用して最も古い状態を破棄します。

プッシュ、ポップ、シフトについては、MDN documentationを参照してください。

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

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

    return temp; 
}; 

編集：

また、あなたはおそらくそうここにある、配列が覗いていた希望自分自身を見つけるでしょう、私のスニペットにバグがあった、空の配列に（）.peekを呼び出す未定義プッシュします。