2010-08-10 27 views
2

J'essaie de calculer les coordonnées correctes de la souris, dans l'espace de coordonnées utilisateur, dans un document SVG du code Javascript lorsque les barres de défilement apparaissent lorsque ce fichier SVG est vu depuis FireFox. Mais ce n'est pas tout à fait correct. Ceci est nécessaire pour obtenir des infobulles basées sur SVG correctement dessinées même lorsque le SVG est défilé horizontalement ou verticalement.Coordonner la transformation en SVG dans Firefox avec barres de défilement

Je souhaite que les transformations de coordonnées soient correctes dans les navigateurs IE et Firefox. En outre, je veux le faire avec une solution Javascript + SVG à source unique qui, espérons-le, ne nécessite pas de code conditionnel spécifique au navigateur. J'utilise actuellement FireFox 3.5.10, mais je considérerais la mise à niveau vers une version plus récente de FireFox, et je n'ai pas encore testé IE.

Le problème que j'ai rencontré dans les décalages de coordonnées pour les barres de défilement: La transformation des coordonnées de la souris n'est pas suffisante lorsque les barres de défilement apparaissent sur l'élément SVG dans Firefox. Comme aide au débogage pour comprendre les transformations de coordonnées, je travaille avec un simple fichier SVG qui contient des gestionnaires Javascript, tous dans un seul fichier, qui dessine simplement des réticules au niveau du curseur de la souris en tant qu'objets ligne SVG. Trouvez-le au svg_cross_hairs.svg. Si vous chargez ce fichier dans FireFox et raccourcissez la fenêtre FireFox jusqu'à ce que les barres de défilement apparaissent, puis faites défiler les barres de défilement vertical ou horizontal, vous constaterez que les réticules dessinés par le Javascript sont compensés par la quantité de défilement horizontale ou verticale, ce qui n'est pas correct pour dessiner une info-bulle sur ou près de l'endroit où se trouve le curseur de la souris. Je vois la question Firefox: Get mouse coordinates of top-left corner of viewport qui parle de la propriété scrollTop.

msg#00056 clarifie qu'il y a une confusion des significations des attributs element.{pageX,pageY,clientX,clientY} et de la méthode element.getscreenCTM.

Y a-t-il un moyen plus propre d'arriver à la bonne coordonnée de la souris, dans le système de coordonnées utilisateur?

Répondre

1

Vous pouvez utiliser evt.pageX/ou evt.pageYwindow.pageXOffset/window.pageYOffset pour arriver à quelque chose qui fonctionne même si le svg est défilée.

+0

http://stackoverflow.com/questions/2599020/what-are-the-typical-reasons-javascript-developed-on-firefox-fails-on/ie2599388#2599388 fournit plus d'informations sur le défilement et apparemment les adresses problèmes de navigateur croisés que mon fragment de code n'a pas. Je suis toujours perplexe quant à la raison pour laquelle getScreenCTM semble être nécessaire dans le code original dont j'ai dérivé mon extrait de code. Dans mon cas pour mon fichier svg qui est chargé directement, getScreenCTM serait-il nécessaire si le svg était incorporé dans une page HTML avec une construction ? (J'ai ajouté un EDIT à ma question originale ci-dessus) – bgoodr