Question

嘿伙计们我已经坚持了这个问题2天了。我似乎无法使这段代码工作：http://www.taffatech.com/Paint.html 绘制3个点，单击撤消2次，它完成它应该做的事情，所以我希望它不能解决太多问题。我将撤消重做绑定到2个按钮'撤消'和'重做'他们在这里：

- 更新，这可能更有意义吗？我得知它工作，除了它现在删除两个然后它通常1到1

   function clearCanvas()
    {
    ctx.clearRect(0,0,canvasWidth,canvasHeight);

    }
   Stack1 = new Stack();
    ///////////////////

    function Stack() {
    var currentState = 0;
    var maxStates = 10;
     var stateArray = [];

var image = new Image();
image.id = "pic";
image.src = canvas.toDataURL();
stateArray.push(image);


    this.add = function() {
       var image = new Image();
image.id = "pic";
image.src = canvas.toDataURL();
stateArray.push(image);
currentState++;
    }

    this.undo = function () {



stateArray.pop();
currentState--;
clearCanvas();
var image = stateArray[curentState];
ctx.drawImage(image,0,0);

    }

    this.redo = function () {
    alert("worry about later");
       // if (stackIndex%stackSize == stackTop) return;
        //clearCanvas();
        //var tmpImg = new Image();
       // tmpImg.src = drawStack[++stackIndex%stackSize];
       // ctx.drawImage(tmpImg, 0, 0);
    }
}

Answer 1

在您的网站上，您的stackSize变量未定义。上面粘贴的代码略有不同，在提供的链接中，堆栈大小传递给function stack(。但是，您没有将任何大小传递给构造函数，并且值未定义。

Answer 2

在推送新堆栈后，您正在递增currentState右，这意味着它当前指向空条目。

然后你在撤销中递减它，这意味着它现在指向你刚刚保存的当前版本 - 这就是你当时屏幕上的内容。

因此，您第一次点击撤消时不会看到任何更改，但仅适用于下一次更改。

您需要做的只是在开始时添加currentState以绘制新内容（即您的鼠标按下事件）。这将表明下一个插槽将填充当前操作。然后当你点击撤销时，它会正常工作，因为它现在又回到了以前的状态。

过程：

Init currentState = -1 StartDraw currentState++ clear items in stack from this position to max EndDraw fill array at currentState Undo currentState-- if < 0 set = -1 and clear canvas else update canvas Redo currentState++ if > array.length -1 exit if >= max set = max -1 and rotate array update canvas at currentState

撤消重做中的逻辑错误

2 个答案: