Как получить правильную позицию мыши относительно div, который имеет примененное масштабирование

Я использую масштаб преобразования css для создания плавного увеличения на div. Проблема в том, что я хочу иметь возможность получить правильную позицию мыши по отношению к div даже при масштабировании, но я могу показать, что правильный алгоритм для получения этих данных. Я извлекаю текущий масштабный коэффициент из

var transform = new WebKitCSSMatrix(window.getComputedStyle($("#zoom_div")[0]).webkitTransform);
scale = transform.a;

Когда я читаю позицию div при различных настройках масштаба, кажется, сообщается о правильной позиции, то есть когда я масштабирую div до тех пор, пока не будет больше экрана, позиция слева и верхние значения будут отрицательными и окажутся правильными, как и возвращаемое значение шкалы:

$("#zoom_div").position().left
$("#zoom_div").position().top

Чтобы получить текущую позицию мыши, я читаю позицию x и y из события click и снимаю смещение. Это работает правильно при значении масштаба 1 (без масштаба), но не при увеличении div. Вот мой основной код:

$("#zoom_div").on("click", function(e){
    var org = e.originalEvent;

    var pos = $("#zoom_div").position();

    var offset = {
        x:org.changedTouches[0].pageX - pos.left,
        y:org.changedTouches[0].pageY - pos.top
    }

    var rel_x_pos = org.changedTouches[0].pageX - offset.x;
    var rel_y_pos = org.changedTouches[0].pageY - offset.y;

    var rel_pos = [rel_x_pos, rel_y_pos];
    return rel_pos;
});

Я сделал несколько попыток умножения деления добавления и вычитания коэффициента масштабирования на/из страницыX/Y, но без везения. Может ли кто-нибудь помочь мне выяснить, как получить правильное значение.

(Я упростил свой код от оригинала, чтобы, надеюсь, сделать мой вопрос более ясным, любые ошибки, которые могут возникнуть в приведенном выше коде, из-за этого редактирования вниз. Мой исходный код с исключением проблемы с положением мыши).

Чтобы проиллюстрировать, что я говорю, я сделал быстрый пример jsfiddle, который позволяет перетаскивать div, используя translate3d. Когда масштаб нормальный (1), div перетаскивается в точку, в которую он нажат. Когда div масштабируется (2), он больше не перетаскивается из точки, нажатой.

http://jsfiddle.net/6EsYG/12/

Ответ 1

Вам нужно установить начало трансляции webkit. В принципе, когда вы увеличиваете масштаб, это будет происходить из центра. Это означает, что смещение будет неправильным. 0,0 начнется в центре площади. Однако, если вы установите начало координат в верхний левый угол, он будет сохранять правильные координаты при масштабировании. Вот как вы устанавливаете источник:

#zoom_div{
    -webkit-transform-origin: 0 0;
}

В сочетании с умножением смещения на шкалу, обработанную для меня:

offset = {
  "x" : x * scale,
  "y" : y * scale
}

Просмотр jsFiddle Demo

Ответ 2

не используйте event.pageX - pos.left, но event.offsetX (или для некоторого браузера: event.originalEvent.layerX

div.on('click',function(e) {
    var x = (e.offsetX != null) ? e.offsetX : e.originalEvent.layerX;
    var y = (e.offsetY != null) ? e.offsetY : e.originalEvent.layerY;
});

см. пример jsFiddle: http://jsfiddle.net/Yukulele/LdLZg/

Ответ 3

Вы можете встроить масштабированный контент в iframe. Масштабировать вне iframe, чтобы включить масштабированные события мыши в iframe, поскольку события мыши - это область документа.