Problème avec la balise

Question

Bonjour !

Je viens d'essayer la balise canvas pour dessiner sur une photo affichée dans une page web. J'ai fouiné sur le web pour comprendre comment elle fonctionnait, et le résultat est le suivant :

http://creafab.free.fr/Tut_divers/Tutoriel_creation_carte_geologique_simplifiee/Test_minutage.html

L'objectif est de sélectionner une couleur et de dessiner sur une photo. Mon souci est le suivant : dans la fonction indiquée ci-dessous, je suis obligé de modifier les coordonnées de pointage du dessin pour que le trait tracé le soit bien sous le pointeur de la souris, et non de façon décalée.

function transform_event_coord(e) {
  //return {x: e.clientX - 10, y: e.clientY - 10};
  return {x: e.clientX-20, y: e.clientY-330};
}

Le problème est que lorsque je fais défiler la page de manière à ce que l'image sur laquelle je viens de dessiner n'apparaît plus qu'en partie, le trait est alors décalé par rapport au pointeur lorsque je dessine à nouveau. 

Comment puis-je faire pour que le trait soit toujours sous le pointeur de la souris ?

J'ai essayé Firefox (KDE et OS X) et Safari (OS X) sur des machines différentes et le décalage n'est jamais le même. J'imagine que cela doit venir d'un décalage lors du calcul des coordonnées, qui doit se faire par rapport à la fenêtre du navigateur et non à la page elle-même ?

Merci pour vos réponses !

Fabien3D · Answer

Mince, je viens de me rendre compte que le texte est apparu d'un bloc. Y'a pas moyen d'éditer le message déjà posté ?

PetoleTeam · Answer

Bonjour, 
voir simplement avec 
  x = e.pageX; 
  y = 
e.pageY;
pour FireFox...
...le "tuto" sur ce site c'est POSITION-SOURIS-DANS-PAGE
;O)

XtremDuke · Answer

Pas vraiment hors sujet mais juste une info :

Le canvas devrait être implémenté de manière standardisé dans les versions des navigateurs à venir. Pour le moment, c'est assez délicat de l'utiliser.

Par contre, le canvas est un puissant objet...
http://www.abrahamjoffe.com.au/ben/canvascape/

PetoleTeam · Answer

Bonjour, 
c'est vrai que cela à l'air TRES puissant, 
j'ai retrouvé le lien que j'ai lu en diagonal jadis, je le livre également... 

Tutoriel canvas
en plus cela fonctionne sous IE7, FireFox, Opéra et Safari que demande le peuple...
;O)

Fabien3D · Answer

Merci beaucoup pour l'aide ! J'ai dû adapter un peu les coordonnées pour que cela colle avec les éléments de la page, mais maintenant, le problème à disparu !

Vous pouvez tester vous-mêmes !

http://creafab.free.fr/Tut_divers/Tutoriel_creation_carte_geologique_simplifiee/Test_minutage.html

Problème avec la balise <canvas>

5 réponses

Votre réponse

Discussions similaires