2

我对javascript相当陌生。我试图让用户可以绘制自己的对象，我在网上找到了一个脚本，里面有铅笔和矩形工具。每次使用矩形工具移动鼠标时，画布都会被清除。

我试图通过在第一个画布上添加第二个画布来解决这个问题，但它不起作用，老实说我不知道​​为什么。

这是我当前版本的脚本：http: //jsfiddle.net/Scilens/mACuK/

我认为为 canvas2 添加事件侦听器会有所帮助，但显然是这样的：

canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup',   ev_canvas, false);
canvas2.addEventListener('mousedown', ev_canvas, false);
canvas2.addEventListener('mousemove', ev_canvas, false);
canvas2.addEventListener('mouseup',   ev_canvas, false);

是不是这样做的正确方法？那是问题吗？我还能怎么做？= /我已经为此苦苦挣扎了很长时间，所以如果您能帮助我，我会很高兴！

4

1 回答 1

4

您可以使用临时绘图画布覆盖您的永久画布

一般程序是：

  • 创建你的“永久”画布来保存你完成的图纸
  • 创建一个“临时”画布，用户可以在该画布上进行新的绘图（可擦除）
  • 最初，使用 CSS 将临时画布移出屏幕
  • 当用户按下鼠标时，使用 CSS 将临时画布移动到永久画布的顶部
  • 当用户拖动绘制（mousemove）时，在临时画布上绘制
  • 当用户释放鼠标（mouseup）时，在永久画布上绘制最终矩形
  • 并将临时画布移回屏幕外

鼠标按下：

  • 保存鼠标起始位置（==x,y of context.rect）
  • 将临时画布移动到永久画布的顶部

  • 设置 isDown 标志指示绘图已开始

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

  // Put your mousedown stuff here
  startX=mouseX;
  startY=mouseY;
  ctx2.clearRect(0,0,canvas2.width,canvas2.height);
  $("#canvas2").css({ left:0, top:0 });
  isDown=true;
}

鼠标移动：

  • 清除临时画布（永久画布不会被擦除）

  • 在临时画布上绘制从起始 XY 到当前鼠标位置的矩形

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

  // Put your mousemove stuff here
  ctx2.clearRect(0,0,canvas2.width,canvas2.height);
  drawRect(mouseX,mouseY,ctx2);

}

鼠标上移：

  • 将临时画布移回屏幕外
  • 在永久画布上绘制用户的最终矩形

  • 绘图完成后清除 isDown 标志

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

  // Put your mouseup stuff here
  isDown=false;
  $("#canvas2").css({ left:-500, top:0 });
  drawRect(mouseX,mouseY,ctx);
}

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

<!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>

<style>
    body{ background-color: ivory; }
    #wrapper{
        position:relative;
        width:300px;
        height:200px;
    }
    #canvas{
        position:absolute; top:0px; left:0px;
        border:1px solid green;
        width:100%;
        height:100%;
    }
    #canvas2{
        position:absolute; top:0px; left:0px;
        border:3px solid red;
        width:100%;
        height:100%;
    }
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvas2=document.getElementById("canvas2");
    var ctx2=canvas2.getContext("2d");

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var startX;
    var startY;
    var isDown=false;

    $("#canvas2").css({ left:-500, top:0 });

    function drawRect(toX,toY,context){
        context.beginPath();
        context.rect(startX,startY,toX-startX,toY-startY);
        context.stroke();
    }


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

      // Put your mousedown stuff here
      startX=mouseX;
      startY=mouseY;
      ctx2.clearRect(0,0,canvas2.width,canvas2.height);
      $("#canvas2").css({ left:0, top:0 });
      isDown=true;
    }

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

      // Put your mouseup stuff here
      isDown=false;
      $("#canvas2").css({ left:-500, top:0 });
      drawRect(mouseX,mouseY,ctx);
    }

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

      // Put your mouseup stuff here
      isDown=false;
      $("#canvas2").css({ left:-500, top:0 });
      drawRect(mouseX,mouseY,ctx);

    }

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

      // Put your mousemove stuff here
      ctx2.clearRect(0,0,canvas2.width,canvas2.height);
      drawRect(mouseX,mouseY,ctx2);

    }

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

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

</head>

<body>
    <p>Drag to draw a rect</p>
    <div id="wrapper">
        <canvas id="canvas2" width=300 height=200></canvas>
        <canvas id="canvas" width=300 height=200></canvas>
    </div>
</body>
</html>
于 2013-08-13T06:08:44.810 回答