0

我有一个允许用户绘制各种形状的 HTML5 画布和一个允许用户徒手画的画笔功能。我正在为这些实现使用命令模式。我面临的问题是“撤消”功能。它适用于所有其他命令，但是当涉及到“画笔”时，它似乎存在问题。

画笔的工作方式是每次拖动鼠标都会存储点，一旦添加了新点，整个点数组就会在屏幕上重新绘制。只有当用户松开鼠标时，绘图才会停止。您可能会立即看到问题，点越旧，它们在屏幕上重绘的次数就越多。这会导致线条看起来比实际颜色深得多。

我的解决方案是仅将最后一个点 n-1 与点 n-2 连接起来，但实际上只重绘最后两个点。我不完全理解画布是如何工作的以及为什么这种方法不起作用但重绘顶部点似乎有效......

这是一些概述关键部分的代码。

BrushStrat.prototype.mousemove=function(event){
    if(this.command!=null){
            //add this point to the list
        this.command.addPoint({x:event.canvasX, y:event.canvasY});
            //redraw all points
        this.command.draw(this.paint.context);
    }
}

BrushCommand.prototype.draw=function(context){
    if(this.points.length==0){
        return;
    }

    context.beginPath(); 
    context.strokeStyle = this.strokeStyle;
    context.lineWidth=this.lineWidth;
    //start from the first point
    context.moveTo(this.points[0].x,this.points[0].y);
    //redraw all subsequent points
    for(var i=1;i<this.points.length;i++){
        context.lineTo(this.points[i].x, this.points[i].y);
    }
    context.stroke();
}
4

2 回答 2

2

在重绘每个数组点之前，清除画布或至少绘图区域。

编辑 是的对不起，我以为你有一个游戏循环。但是，它仍然是一个有效的选项：使用两个画布作为绘图区域。一个用于绘制“当前”形状/曲线（在绘制每个点之前清除）和另一个具有所有已完成形状/曲线的持久层。

回顾一下，当用户单击并拖动此形状时，此形状将绘制到当前图层。当用户释放鼠标时，图像现在被“锁定”并传输到持久层。

希望这是有道理的。

于 2013-03-16T19:11:58.330 回答
2

使用命令模式的手绘笔触

您在实施“命令模式”来跟踪用户的自由式笔触方面做出了很好的选择！

mouseDown 和 mouseUp 之间的每个绘图都被视为一个“拖动组”。

每个“拖动组”都添加到一个主数组 (CommandStack[])。

然后，您可以通过简单地删除 CommandStack[] 上的最后一个组来轻松地撤消最后一个绘图。

这是用户在拖动周期中发生的情况：

鼠标按下：

  • 设置这组拖动线的起始 X、Y。
  • 创建一个新的点数组，专门用于这组拖线 (newPoints[])

鼠标移动：

  • 将每个鼠标位置点添加到 newPoints[]。

鼠标向上：

  • 拖拽结束--停止向newPoints[]添加点。
  • 将起始 X、Y 和 newPoints[] 都存储到 CommandStack[] 数组中。

然后，您可以简单有效地撤消笔划：

  • 像这样从 CommandStack[] 中删除最后一个 newPoints[]：CommandStack.pop()
  • 重绘 CommandStack[] 中的所有剩余笔划。
  • 绘图在视觉上与用户最后一笔画之前相同（快速+高效）！
  • 您可以通过从 CommandStack[] 中执行更多弹出来删除更多行。
  • 您还可以通过保存弹出的 newPoints[] 轻松实现 REDO。

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

<!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 strokeColor="red";
    var strokeWidth=2;
    var canMouseX;
    var canMouseY;
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var isMouseDown=false;

    // command pattern -- undo
    var commandStack=new Array();
    var newStart;
    var newPoints=new Array();


    function handleMouseDown(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      $("#downlog").html("Down: "+ canMouseX + " / " + canMouseY);

      // Put your mousedown stuff here
      lastX=canMouseX;
      lastY=canMouseY;
      isMouseDown=true;
      // command pattern stuff
      newStart={x:canMouseX,y:canMouseY};
      newPoints=new Array();
    }

    function handleMouseUp(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      $("#uplog").html("Up: "+ canMouseX + " / " + canMouseY);

      // Put your mouseup stuff here
      isMouseDown=false;
      // command pattern stuff
      commandStack.push({moveTo:newStart,points:newPoints});
    }

    function handleMouseOut(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      $("#outlog").html("Out: "+ canMouseX + " / " + canMouseY);

      // Put your mouseOut stuff here
      isMouseDown=false;
    }

    function handleMouseMove(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      $("#movelog").html("Move: "+ canMouseX + " / " + canMouseY);

      // Put your mousemove stuff here
      if(isMouseDown){
          ctx.beginPath();
          ctx.moveTo(lastX,lastY);
          ctx.lineTo(canMouseX,canMouseY);
          ctx.stroke();     
          lastX=canMouseX;
          lastY=canMouseY;
          // command pattern stuff
          newPoints.push({x:canMouseX,y:canMouseY});
      }
    }

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

    $("#undo").click(function(e){ undoLast(); });

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

    function redrawAll(){

        // prep for commandStack redraws
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.save()
        ctx.strokeStyle="blue";
        ctx.beginPath();

        // loop through the commandStack and draw all nodes
        for(var s=0;s<commandStack.length;s++){

            // move to the starting point of this node
            var start=commandStack[s].moveTo;
            ctx.moveTo(start.x,start.y);

            // draw each line segment in this node
            var pts=commandStack[s].points;


            for(var p=0;p<pts.length;p++){
                ctx.lineTo(pts[p].x,pts[p].y);
            }  // end for(p)

        } // end for(s)

        // actually draw the lines
        ctx.stroke();

    ctx.restore();

    }


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

</head>

<body>

    <p id="downlog">Down</p>
    <p id="movelog">Move</p>
    <p id="uplog">Up</p>
    <p id="outlog">Out</p>
    <canvas id="canvas" width=300 height=300></canvas>
    <button id="undo">Undo</button>

</body>
</html>
于 2013-03-16T22:52:16.683 回答