KineticJS - マウスで線を描く

私はマウスの動きに基づいて線を引くためにKinectJSを使用しています。ユーザーがマウスボタンを押したままにしておくと、その行の '開始点'になりたいと思います。ユーザーが解放すると、行の '終わり'になりますが、マウスを押し下げているので私のマウスが動くように線を動的に再描画できるようにする。これは可能ですか？KineticJS - マウスで線を描く

出典

2012-09-07 will

はい、可能です。

基本的に、onMouseMoveイベント中にレイヤーを再描画する必要があります。ラインが動いているかどうかを制御するフラグが必要です。

スクリプトが初期化されると、このフラグはfalseになります。

onMouseDownで、行開始は現在のマウス座標を受け取り、フラグをtrueに設定する必要があります。

onMouseMouveで、フラグがtrueの場合は、現在のマウス座標を受け取るように行末を更新する必要があります。

onMouseUpでは、フラグをfalseに設定する必要があります。

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style> 
      body { 
       margin: 0px; 
       padding: 0px; 
      } 
      canvas { 
       border: 1px solid #9C9898; 
      } 
     </style> 
     <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.1.js"></script> 
     <script> 
      window.onload = function() { 
       layer = new Kinetic.Layer(); 
       stage = new Kinetic.Stage({ 
        container: "container", 
        width: 320, 
        height: 320 
       }); 

       background = new Kinetic.Rect({ 
        x: 0, 
        y: 0, 
        width: stage.getWidth(), 
        height: stage.getHeight(), 
        fill: "white" 
       }); 

       line = new Kinetic.Line({ 
        points: [0, 0, 50, 50], 
        stroke: "red" 
       }); 

       layer.add(background); 
       layer.add(line); 
       stage.add(layer); 

       moving = false; 

       stage.on("mousedown", function(){ 
        if (moving){ 
         moving = false;layer.draw(); 
        } else { 
         var mousePos = stage.getMousePosition(); 
         //start point and end point are the same 
         line.getPoints()[0].x = mousePos.x; 
         line.getPoints()[0].y = mousePos.y; 
         line.getPoints()[1].x = mousePos.x; 
         line.getPoints()[1].y = mousePos.y; 

         moving = true;  
         layer.drawScene();    
        } 

       }); 

       stage.on("mousemove", function(){ 
        if (moving) { 
         var mousePos = stage.getMousePosition(); 
         var x = mousePos.x; 
         var y = mousePos.y; 
         line.getPoints()[1].x = mousePos.x; 
         line.getPoints()[1].y = mousePos.y; 
         moving = true; 
         layer.drawScene(); 
        } 
       }); 

       stage.on("mouseup", function(){ 
        moving = false; 
       }); 

      }; 
     </script> 
    </head> 
    <body> 
     <div id="container" ></div> 
    </body> 
</html>

出典

2012-09-08 18:51:41 maiconio

複数の線を描画するための方法と同じラインを交換しないがあります：

は、以下の例は、参照してください？ – Mike

@TrustWebそれは確かです。それぞれのマウスに新しい形を作成する –

便宜のために答えのJSFiddleがあります：http://jsfiddle.net/nSSTS/ –

KineticJS - マウスで線を描く

答えて

関連する問題