Question

我需要为我的绘图程序实现一个撤消/重做系统：http://www.taffatech.com/Paint.html

我想出的想法是拥有2个阵列堆栈，一个用于撤销，一个用于重做。无论何时绘制和释放鼠标，它都会通过推送将画布图像保存到撤消数组堆栈。如果你绘制其他东西并释放它也会做同样的事情。但是，如果单击“撤消”，它将弹出撤消数组的顶部图像并将其打印到画布，然后将其推送到重做堆栈。

单击时重做将从其自身弹出并按下撤消。每次关闭鼠标后都会打印撤消的顶部。

这是正确的方式还是有更好的方式？

Answer 1

一句警告！

将整个画布保存为撤消/重做的图像是内存密集型和性能杀手。

但是，您逐步将用户的绘图保存在数组中的想法仍然是一个好主意。

不是将整个画布保存为图像，而是创建一个点数组来记录用户在绘制时所做的每个鼠标移动。这是您的“绘图数组”，可用于完全重绘画布。

每当用户拖动鼠标时，他们就会创建折线（一组连接的线段）。当用户拖动以创建线条时，将该鼠标移动点保存到绘图数组并将其折线延伸到当前鼠标移动位置。

function handleMouseMove(e) {

    // calc where the mouse is on the canvas
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    // if the mouse is being dragged (mouse button is down)
    // then keep drawing a polyline to this new mouse position
    if (isMouseDown) {

        // extend the polyline
        ctx.lineTo(mouseX, mouseY);
        ctx.stroke();

        // save this x/y because we might be drawing from here
        // on the next mousemove
        lastX = mouseX;
        lastY = mouseY;

        // Command pattern stuff: Save the mouse position and 
        // the size/color of the brush to the "undo" array
        points.push({
            x: mouseX,
            y: mouseY,
            size: brushSize,
            color: brushColor,
            mode: "draw"
        });
    }
}

如果用户想要“撤消”，只需弹出绘图数组的最后一点：

function undoLastPoint() {

    // remove the last drawn point from the drawing array
    var lastPoint=points.pop();

    // add the "undone" point to a separate redo array
    redoStack.unshift(lastPoint);

    // redraw all the remaining points
    redrawAll();
}

重做在逻辑上更棘手。

最简单的重做是当用户只能在撤消后立即重做。将每个“撤消”点保存在单独的“重做”数组中。然后，如果用户想要重做，您只需将重做位添加回主阵列即可。

复杂的是，如果您在完成更多绘图后让用户“重做”。

例如，你可能最终得到一条有2条尾巴的狗：一条新画的尾巴和第二条“重做”的尾巴！

因此，如果您在额外绘制后允许重做，则需要一种方法来防止用户在重做期间感到困惑。 Matt Greer关于“分层”redos的想法是一个很好的方法。只需通过保存重做点来改变这个想法，而不是整个画布图像。然后用户可以打开/关闭重做以查看他们是否想要重做。

以下是使用我为上一个问题创建的撤消数组的示例：Drawing to canvas like in paint

这是代码和小提琴：http://jsfiddle.net/m1erickson/AEYYq/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var lastX;
    var lastY;
    var mouseX;
    var mouseY;
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var isMouseDown=false;
    var brushSize=20;
    var brushColor="#ff0000";
    var points=[];


    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      ctx.beginPath();
      if(ctx.lineWidth!=brushSize){ctx.lineWidth=brushSize;}
      if(ctx.strokeStyle!=brushColor){ctx.strokeStyle=brushColor;}
      ctx.moveTo(mouseX,mouseY);
      points.push({x:mouseX,y:mouseY,size:brushSize,color:brushColor,mode:"begin"});
      lastX=mouseX;
      lastY=mouseY;
      isMouseDown=true;
    }

    function handleMouseUp(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mouseup stuff here
      isMouseDown=false;
      points.push({x:mouseX,y:mouseY,size:brushSize,color:brushColor,mode:"end"});
    }


    function handleMouseMove(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      if(isMouseDown){
          ctx.lineTo(mouseX,mouseY);
          ctx.stroke();     
          lastX=mouseX;
          lastY=mouseY;
          // command pattern stuff
          points.push({x:mouseX,y:mouseY,size:brushSize,color:brushColor,mode:"draw"});
      }
    }


    function redrawAll(){

        if(points.length==0){return;}

        ctx.clearRect(0,0,canvas.width,canvas.height);

        for(var i=0;i<points.length;i++){

          var pt=points[i];

          var begin=false;

          if(ctx.lineWidth!=pt.size){
              ctx.lineWidth=pt.size;
              begin=true;
          }
          if(ctx.strokeStyle!=pt.color){
              ctx.strokeStyle=pt.color;
              begin=true;
          }
          if(pt.mode=="begin" || begin){
              ctx.beginPath();
              ctx.moveTo(pt.x,pt.y);
          }
          ctx.lineTo(pt.x,pt.y);
          if(pt.mode=="end" || (i==points.length-1)){
              ctx.stroke();
          }
        }
        ctx.stroke();
    }

    function undoLast(){
        points.pop();
        redrawAll();
    }

    ctx.lineJoin = "round";
    ctx.fillStyle=brushColor;
    ctx.lineWidth=brushSize;

    $("#brush5").click(function(){ brushSize=5; });
    $("#brush10").click(function(){ brushSize=10; });
    // Important!  Brush colors must be defined in 6-digit hex format only
    $("#brushRed").click(function(){ brushColor="#ff0000"; });
    $("#brushBlue").click(function(){ brushColor="#0000ff"; });

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});

    // hold down the undo button to erase the last line segment
    var interval;
    $("#undo").mousedown(function() {
      interval = setInterval(undoLast, 100);
    }).mouseup(function() {
      clearInterval(interval);
    });


}); // end $(function(){});
</script>

</head>

<body>
    <p>Drag to draw. Use buttons to change lineWidth/color</p>
    <canvas id="canvas" width=300 height=300></canvas><br>
    <button id="undo">Hold this button down to Undo</button><br><br>
    <button id="brush5">5px Brush</button>
    <button id="brush10">10px Brush</button>
    <button id="brushRed">Red Brush</button>
    <button id="brushBlue">Blue Brush</button>
</body>
</html>

Answer 2

这是我为paint app所做的基本想法;并且它确实运行良好，但这种方法可能非常耗费内存。

所以我做的一点点调整只是存储撤消/重做剪辑，这些剪辑的大小与用户执行的最后一个操作相同。因此，如果他们只是画出一小块画布，你可以存储一个小尺寸的画布，并且可以节省大量内存。

我的撤消/重做系统位于Painter.js。两年前我写了这个应用程序，所以我的记忆有点模糊，但如果你决定解码我所做的事情，我可以帮忙解释一下。

Answer 3

尝试实施Command design pattern。

这里还有另一个类似的问题：Best design pattern for "undo" feature

使用Canvas撤消/重做绘画程序

3 个答案: