7

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

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(); 
})

ありがとう。

4

3 に答える 3

12

私の知る限り、kineticjs のステージには「クリック」イベントはありません。次のようなものを使用する必要があります。

stage.getContainer().addEventListener('mousedown', function(evt) {});
于 2012-05-07T18:44:46.463 に答える
2

私が取り組んできたことを示すフィドルへのリンク：

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

KineticJSとSketch.jsを使った描画ツール一式です

「スケッチを作成」を選択してフリーハンドで描画し、「スケッチをキネティックにコピー」を選択してスケッチをキネティック ステージにコピーする必要があります。「長方形にする」を選択して長方形を作ります。

これを投稿するにはコードを含める必要があるため、[長方形を作成] ボタンを選択したときのコードを次に示します。

$('#makeRect').click(関数 (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();
                }
            });

これにより、キャンバスをクリックするまでマウスに追従する長方形が作成され、その長方形がステージの Redlines レイヤーにドロップされます。

drawLayer.on("マウスダウン", function (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;

            });
于 2012-10-25T16:17:18.207 に答える
0

私はまったく同じ問題を抱えていましたが、実際、Guilherme の方法は非常にうまく機能します。

しかし、簡単な代替手段があります: キャンバスと同じサイズの透明な Rect (キネティック レクタングル) を作成します。

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

上記のコードは、マウスをキャンバス (id "container" の div) の上に置くと、マウスの x と y の位置を出力します。もちろん、このコードを使用する前に KineticJS ライブラリをロードする必要があります。

于 2012-10-23T19:02:28.030 に答える