solución Cross-browser para reemplazar el uso de event.layerX y event.layerY

Question

Estoy intentando adaptar algunos código de una aplicación sencilla que utiliza Raphael para permitir a los usuarios dibujar círculos y rectángulos en un lienzo. (Código original en https://gist.github.com/673186)

el código original usado una versión anterior de jQuery y funcionaba bien. Ver http://jsfiddle.net/GHZSd/

Utilizando una versión actualizada de jQuery, sin embargo, se rompe el ejemplo. Ver http://jsfiddle.net/GHZSd/1/

El motivo es que event.layerX y event.layerY ya no están definidos en la nueva versión de jQuery. Mi pregunta es: ¿qué código puedo usar para reemplazar esos valores? He intentado un par de cosas simplemente haciendo un poco de matemática (event.originalEvent.layerX/layerX todavía existe por ahora, así que estoy tratando de agregar/restar algunas cosas que darán como resultado esos valores) pero hasta ahora lo que funciona en uno el navegador no funciona en todos ellos.

Lo siento si esto se ha hecho antes, pero no fue capaz de encontrar una respuesta concreta sobre el SO o en cualquier otro lugar.

Answer 1

lo tanto, pensé un poco acerca de este problema, ya que el equipo de Chrome quiere quitar layerX layerY por razones extrañas.

primer lugar, tenemos la posición de su contenedor:

var position = $paper.offset(); 

(para los que la lectura sin el violín abrió, $ de papel es el div donde se dibujará el SVG)

Nos da dos coords, position.top y position.left, por lo que sabemos en qué parte de la página está el contenedor.

Luego, al hacer clic, usamos e.pageX y e.pageY, que son los coords de la página. Para emular layerX layerY, utilizamos (e.pageX - position.left) y (e.pageY - position.top)

Et voilà: http://jsfiddle.net/GHZSd/30/

Obras en Chrome, Safari, FF y Opera.