0

ドラッグ可能を使用してkineticjsの同じノードをクリックする方法は? ドラッグ可能を使用すると、ドラッグ後にもクリックイベントが発生します。

jsfiddle でhttp://jsfiddle.net/matobaa/LZ5tt/

これがコードです...

var stage = new Kinetic.Stage({
  container: 'container', width: 640, height: 480
});
var layer = new Kinetic.Layer();
var oval = new Kinetic.Ellipse({
  x: 100, y: 100, radius: 50, stroke: 'red',
  draggable: true,
});
oval.on('click', function(evt) {
  alert("clicked!"); // Will not be triggered after drag
})
layer.add(oval);
stage.add(layer);

私はkineticjs 4.4.1を使用しています。助けてください。

4

3 に答える 3

2

ドラッグ状態を検出する必要があります。エス:

var indrag = false;
oval.on('dragstart', function(evt){
    indrag = true;
});
oval.on('dragend', function(evt){
    indrag = false;
});

その後：

oval.on('click', function(evt) {
    if (!indrag){
        alert("clicked!"); // Will not be triggered after drag
    }
})
于 2013-04-09T15:35:29.903 に答える
0

KineticJS バージョン 5.1.0 に関する便利なヒントです。

キネティック ステージ上でクリックが検出された場合、シェイプ上でドラッグを終了した後、ステージ上でクリック イベントが発生することがあります。

私が提案するのは、ドラッグスタート内で制御変数を「true」に設定することです。次に、トリガーされたクリックイベント内のその変数を確認し、それを「false」に設定してから、コードブロックを終了するために戻ります。この方法では、クリック イベントは妨げられませんが、処理されても何も起こりません。

上記の回答からいくつかのコードを借りさせてください。

var indrag = false;

oval.on('dragstart', function(evt){
    indrag = true;
});
oval.on('dragend', function(evt){

});

stage.on('click', function(evt) {
    if (indrag){
        indrag = false;
        return;
    }

    // else, it is a valid click, then do what you need to do...
})
于 2014-05-15T16:56:07.177 に答える
0

変数値を介して現在のイベント機能をチェックすることでそれを行うことができます。jsFiddle: http://jsfiddle.net/LZ5tt/4/

    var stage = new Kinetic.Stage({
      container: 'container', width: 640, height: 480
    });
    var layer = new Kinetic.Layer();
    var oval = new Kinetic.Ellipse({
        x: 100, y: 100, radius: 50, stroke: 'red',
      draggable: true,
    });
    var drag = false;
    oval.on('dragstart', function(event){
        drag = true;
    });
    oval.on('dragend', function(event){
        drag = false;
    });
    oval.on('click', function(event) {
        if (!drag){
            alert("I'm clicked!");
        }
    })
    layer.add(oval);
    stage.add(layer);
于 2013-04-29T10:43:56.713 に答える