1

私は Kinetic.js を学んでいますが、HTML5<canvas>要素を使用して簡単に作成できることを本当に楽しんでいます。

「ステージ」(キネティック用語を使用) よりも大きい大きなレイヤーがありますが、ドラッグ可能です。ドラッグ機能は、2 つの異なる方法でクリック ハンドラーに干渉しているようです。そして、そうするものの中で、レイヤーが元の位置にある場合にのみ位置が正確になります。

ここに私が抱えている問題を表示するフィドルがあります。私の実際のコードでは、最下層は実際には画像です。

4

1 に答える 1

2

http://jsfiddle.net/EKaAv/1/

layer.on ('click', function(e) {
    console.log(e);
    var mousePos = stage.getMousePosition(); // mouse position relative to stage
    var xclick = mousePos.x;
    var yclick = mousePos.y;
    var circle = new Kinetic.Circle({
        x: xclick - layer.getX(), // since position is relative to stage, adjust by layer X
        y: yclick - layer.getY(), // same as above
        radius: 25,
        fill: 'red',
        opacity: 0.5
    });
    layer.add(circle);
    stage.draw();       // redraw the stage immediately
});

登録されていないように見えるクリックは、クリック イベントをオーバーライドするドラッグ可能なイベントの発生によるものです。

于 2013-02-12T23:25:09.150 に答える