Как получить точное положение указателя при щелчке поверх перетаскиваемого слоя?

Я только изучаю Kinetic.js, и мне очень нравится, как легко это делается с помощью элемента HTML5 <canvas>.

У меня есть большой слой, который больше, чем «сцена» (если использовать кинетический язык), но его можно перетаскивать. Функциональность перетаскивания, по-видимому, взаимодействует с обработчиком кликов двумя разными способами: некоторые одиночные клики не регистрируются; и из тех, которые это делают, местоположение является точным только в том случае, если слой находится в своем исходном положении.

Вот скрипка, отображающая мою проблему. В моем фактическом коде нижний слой на самом деле является изображением.


javascript canvas html kineticjs
person coding_hero    schedule 12.02.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

Любые щелчки, которые, кажется, не зарегистрированы, происходят из-за срабатывания перетаскиваемого события, которое переопределяет событие щелчка.

person Shmiddty    schedule 12.02.2013
comment
Великолепно! getX() и getY() были именно тем, что я искал, но не смог найти в документации. Я, вероятно, реализую «режимы» для перемещения и редактирования, поэтому мне, вероятно, не придется беспокоиться о спорных обработчиках событий. Огромное спасибо. - person coding_hero; 13.02.2013
comment
Я не совсем уверен, почему Kinetic усложняет получение/изменение координат x/y, но это так. Я знаю это только потому, что сегодня потратил некоторое время на ускоренное программирование клона прорыва в Kinetic. :D - person Shmiddty; 13.02.2013