Jak uzyskać poprawną pozycję myszy w stosunku do elementu div, który ma zastosowaną transformację skali

Question

Używam skali przekształcania css, aby utworzyć płynne powiększanie elementu div. Problem polega na tym, że chcę być w stanie uzyskać poprawną pozycję myszy w stosunku do div, nawet przy skalowaniu, ale mogę się dowiedzieć, jaki jest prawidłowy algorytm, aby uzyskać te dane. Ja pobierania aktualny współczynnik skali od

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

Kiedy czytam stanowisko div przy różnych ustawieniach skalę wydaje się zgłosić prawidłową pozycję, czyli kiedy przeskalować div, dopóki jest to większy ekran pozycja wartości lewa i górna są negatywne i wydają się być poprawne, podobnie jak zwrócona wartość skala:

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

aby uzyskać aktualną pozycję myszy czytam X i y położenia od zdarzenia click i pozbawianie offset. Działa to poprawnie przy wartości skali 1 (bez skali), ale nie wtedy, gdy element div jest skalowany. Tu jest mój podstawowy kod:

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

Zrobiłem kilka prób pomnożenie dzielenie dodawanie i odejmowanie współczynnik skali z/od pageX/Y, ale bez powodzenia. Czy ktoś może mi pomóc dowiedzieć się, jak uzyskać właściwą wartość.

(Uproszyłem swój kod z oryginału, aby, mam nadzieję, uczynić moje pytanie bardziej zrozumiałym, wszelkie błędy, które można znaleźć w powyższym kodzie, wynikają z tej edycji w dół Mój oryginalny kod z wyjątkiem problemu z pozycją myszy).

Aby zilustrować, o czym mówię, zrobiłem szybki przykład jsfiddle, który umożliwia przeciąganie elementu div za pomocą translate3d. Kiedy skala jest normalna (1), element div jest przeciągany w miejscu kliknięcia. Kiedy element div jest skalowany (2), nie jest już prawidłowo przeciągany od klikniętego punktu.

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

Answer 1

Musisz ustawić WebKit przekształcić pochodzenia Zasadniczo, po skalowaniu będzie pochodzić z centrum, co oznacza, że ​​przesunięcie będzie nieprawidłowe 0,0 rozpocznie się na środku kwadratu, jednak jeśli ustawisz początek do góry l róg eft, zachowa prawidłowe współrzędne podczas skalowania. W ten sposób można ustawić pochodzenia:

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

To w połączeniu z pomnożenia skompensowany skali pracował dla mnie:

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

View jsFiddle Demo

Answer 2

nie używaj event.pageX - pos.left, ale event.offsetX (lub jakiegoś przeglądarki: 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; 
}); 

zobaczyć moją jsFiddle exemple. http://jsfiddle.net/Yukulele/LdLZg/

Answer 3

może osadzać przeskalowany treści w iframe. Skaluj poza ramką iframe, aby włączyć skalowane zdarzenia myszy w elemencie iframe, ponieważ zdarzenia myszy są zasięgiem dokumentu.