kineticjsを使ったインタラクティブな描画

Question

クリックしてドラッグして矩形を描きたいと思います。これどうやってするの ？クリックイベントリスナーはどこに置く必要がありますか？ステージ上かレイヤー上？私は次のコードを持っていますが、動作しません。

stage = new Kinetic.Stage({...}) 
layer = new Kinetic.Layer({...}) 

stage.add(layer) 

stage.on('click', function() { 
    var pos = stage.getMousePosition(); 
    var rect = new Kinetic.Rect({ 
     x: pos.x, 
     y: pos.y, 
     width: 10, 
     height: 10, 
    }); 
    layer.add(rect); 
    layer.draw(); 
}) 

ありがとう。

Answer 1

私の知る限り、kineticjsのステージでは「クリック」イベントはありません。

stage.getContainer().addEventListener('mousedown', function(evt) {}); 

Answer 2

私はまったく同じ問題を抱えていましたが、確かにGuilhermeの方法は大きく働いています。

しかし、簡単な選択肢があります：あなたはそれを上に置くと

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){ 
    function writeMessage(messageLayer, message) { 
     var context = messageLayer.getContext(); 
     messageLayer.clear(); 
     context.font = '18pt Calibri'; 
     context.fillStyle = 'black'; 
     context.fillText(message, 10, 25); 
    } 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 578, 
     height: 200 
    }); 
    var shapesLayer = new Kinetic.Layer(); 
    var messageLayer = new Kinetic.Layer(); 

    var rect = new Kinetic.Rect({ 
     x:0, 
     y:0, 
     width:stage.getWidth(), 
     height:stage.getHeight(), 
     stroke:0 
    }); 

    rect.on('mousemove', function() { 
     var mousePos = stage.getMousePosition(); 
     var x = mousePos.x; 
     var y = mousePos.y; 
     writeMessage(messageLayer, 'x: ' + x + ', y: ' + y); 
    }); 


    stage.getContainer().addEventListener('mouseout', function(evt) { 
     writeMessage(messageLayer, ''); 
    }); 

    shapesLayer.add(rect); 

    stage.add(shapesLayer); 
    stage.add(messageLayer); 
}//]]> 
</script> 

上記のコードは、マウスのxとyの位置を出力します：透明のRect（キネティック長方形）キャンバスと同じサイズを作成キャンバス（idが "container"のdiv）。このコードを使用する前にKineticJSライブラリをロードする必要があります。私が取り組んできたかを示しフィドルに

Answer 3

リンク：

http://jsfiddle.net/robtown/SGQq7/22/

それはKineticJSを使用して描画ツールのセットだとSketch.js

あなたはスケッチをする」を選択する必要がありますフリーハンドを描いてスケッチをKineticにコピーしてスケッチをキネティックステージにコピーします。 「長方形にする」を選択すると長方形になります。

私はここにあなたがボタン「矩形ください」を選択したときのためのコードですこれを投稿するためのコードを含める必要があります。

$（「＃のmakeRect」）は（関数（e）をクリックし、{

   followRect = new Kinetic.Rect({ 
       width: 120, 
       height: 40, 
       x: -200, 
       y:-200,      
       stroke: 'red', 
       strokeWidth: 3 
      }); 
      drawLayer.setVisible(true); 

      drawLayer.add(followRect); 
      drawLayer.draw(); 
      makeRect = true; 
      drawLayer.on("mousemove", function (e) { 
       if (makeRect) { 
        followRect.setX(e.x+5); 
        followRect.setY(e.y+5); 
        drawLayer.draw(); 
       } 
      }); 

これは、それは、ステージの朱書き層に矩形をドロップし、あなたはキャンバスをクリックするまで、マウスを次の四角形を作成します。

drawLayer.on（「マウスダウン」、機能（E）{

   //for (var f = 0 ; f < 1; f++) { 
       //alert(e.length); 
       if (makeRect) { 
        addToRedlineLayer(e.x, e.y); 
       } 
       //} 
        followRect.setX(-200); 

        drawLayer.setVisible(false); 
       return; 

      });