Проблема с сохранением данных холста в массиве

Question

Я создаю веб-приложение с использованием холста HTML5 для рисования изображений (например, лакокрасочного полотна), я пытаюсь реализовать функции «отменить» (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); 
    } 
} 

Любое решение или обходное решение, я возьму, большое спасибо!

Answer 1

Я реализовал функцию отмены/повтора несколько раз, и, хотя я не могу опубликовать код по причинам лицензирования, я могу дать вам несколько psuedocode, которые должны продемонстрируйте, насколько простым является отмена/повтор:

сначала, вы n два массива. назовите эти «отменить» и «повторить».

Каждый раз, когда состояние изменяется, нажмите это состояние в стек отмены.

Когда пользователь нажимает ctrl-z (отменить), вытащите последнее сохраненное состояние из стека отмены. нажмите это состояние в очередь повтора, а также сделайте его текущим.

Когда пользователь нажимает ctrl-y (redo), вытащите последнее сохраненное состояние из очереди повтора.

Если какой-либо из массивов начинает заполняться за # состояний, которые вы хотите сохранить, используйте shift для сброса самого старого состояния.

Для ссылок на push, pop и shift см. MDN documentation.

Кроме того, вы, вероятно, найти себя, желающие буи выглядывать, так вот она:

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

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

    return temp; 
}; 

редактировать: была ошибка в моем фрагменте коде вызов .peek() на пустом массиве будет толкать неопределенными ,