Come ottenere la corretta posizione del mouse in relazione ad un div che ha ha una scala trasformata applicata

Question

Sto usando css trasformare scala per creare uno zoom liscia su un div. Il problema è che voglio essere in grado di ottenere la corretta posizione del mouse in relazione alla div anche quando scalati, ma posso sembrare capire il corretto algoritmo per ottenere questi dati. Sto recuperando il fattore di scala corrente

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

Quando ho letto la posizione del div con le varie impostazioni della scala sembra segnalare la posizione corretta, cioè quando mi scala il div fino a quando è è più grande il lo schermo nella posizione I valori left e top sono negativi e sembrano essere corrette, così come il valore della scala ritornato:

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

per ottenere la posizione corrente del mouse sto leggendo la posizione xey dall'evento click e togliendo l'offset. Funziona correttamente con un valore di scala di 1 (nessuna scala) ma non quando il div è scalato. Qui è il mio codice di base:

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

Ho fatto diversi tentativi di moltiplicazione divisione aggiungendo e sottraendo il fattore di scala da/dal pageX/Y, ma senza alcuna fortuna. Qualcuno può aiutarmi a capire come ottenere il valore corretto.

(Ho semplificato il mio codice dall'originale per fare in modo che la mia domanda sia più chiara, eventuali errori che si possono trovare nel codice precedente sono dovuti a tale modifica. Il mio codice originale con l'eccezione per il problema di posizione del mouse).

per illustrare ciò che sto parlando ho fatto un esempio jsfiddle rapido che permette il trascinamento di un div con translate3d. Quando la scala è normale (1) il div è trascinato nel punto in cui è stato fatto clic. Quando div è scalabile (2) non si trascina più correttamente dal punto cliccato.

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

Answer 1

È necessario impostare il webkit trasformare origine In sostanza, quando si scala fino esso hanno origine dal centro. Questo significa che l'offset sarà sbagliata. 0,0 inizierà nel centro della piazza. Tuttavia, se si imposta l'origine alla l alto angolo di fuga, manterrà le coordinate corrette durante il ridimensionamento. Questo è il modo di impostare l'origine:

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

Questo, combinato con moltiplicando i compensata dalla scala funzionato per me:

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

View jsFiddle Demo

Answer 2

uso dont event.pageX - pos.left, ma event.offsetX (o per qualche navigatore: 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; 
}); 

veder la mia jsFiddle Esempio:. http://jsfiddle.net/Yukulele/LdLZg/

Answer 3

E 'possibile incorporare il contenuto in scala all'interno di un iframe. Scala esterna dall'iframe abilitare eventi in scala del mouse nell'iframe come eventi mouse sono portata documento.