Question

我对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);

这不是正确的方法吗？那是问题吗？我怎么办呢？ = / 我一直在努力解决这个问题，所以如果你能帮助我，我会很高兴的！

Answer 1

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

一般程序是：

创建包含已完成图纸的“永久”画布
创建一个“临时”画布，用户可以在其上执行新绘图（可擦除）
最初，使用CSS将临时画布移出屏幕
当用户按下鼠标时，使用CSS将临时画布移动到永久画布上
当用户拖动绘制（mousemove）时，在临时画布上绘图
当用户释放鼠标（mouseup）时，在永久画布上绘制最后一个矩形
并将临时画布移回屏幕外

<强> MOUSEDOWN：

保存起始鼠标位置（== 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;
}

<强> MOUSEMOVE：

清除临时画布（永久画布未被删除）

在临时画布上绘制从开始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>

在不清除画布的情况下绘制矩形？（事件听众？）

1 个答案:

在不清除画布的情况下绘制矩形？ （事件听众？）

1 个答案:

在不清除画布的情况下绘制矩形？（事件听众？）