0

嘿伙计们，我已经被这个问题困扰了 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);
    }
}
4

2 回答 2

1

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

于 2013-06-17T22:02:11.617 回答
1

发生的情况是，您在推送新堆栈后正在增加您的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
于 2013-06-17T22:54:47.697 回答