Problème avec la balise <canvas>

Signaler
Messages postés
3
Date d'inscription
samedi 24 février 2007
Statut
Membre
Dernière intervention
13 novembre 2008
-
Messages postés
3
Date d'inscription
samedi 24 février 2007
Statut
Membre
Dernière intervention
13 novembre 2008
-
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 !
A voir également:

5 réponses

Messages postés
3
Date d'inscription
samedi 24 février 2007
Statut
Membre
Dernière intervention
13 novembre 2008

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é ?
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
voir simplement avec
  x = e.pageX;
  y =
e.pageY;
pour FireFox...
...le "tuto" sur ce site c'est POSITION-SOURIS-DANS-PAGE
;O)
Messages postés
626
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3
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/
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
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)
Messages postés
3
Date d'inscription
samedi 24 février 2007
Statut
Membre
Dernière intervention
13 novembre 2008

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