2

私はjavascriptにかなり慣れていません。ユーザーが独自のオブジェクトを描画できるようにしようとしていますが、鉛筆と長方形ツールを備えたスクリプトをオンラインで見つけました。長方形ツールを使用しているときにマウスを動かすたびに、キャンバスがクリアされます。

最初のキャンバスの上に 2 番目のキャンバスを追加してこの問題を解決しようとしましたが、うまくいきません。正直なところ理由がわかりません。

これが私の現在のバージョンのスクリプトです: 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)、パーマネント キャンバスに最後の四角形を描画します。
  • また、一時キャンバスを画面外に戻します

マウスダウン:

  • マウスの開始位置を保存します (==context.rect の x,y)
  • 一時キャンバスを永続キャンバスの上に移動します

  • 描画が開始されたことを示す 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 に答える