Discussion :

[VegaHives]

Bonjour,

Voilà, j'aurais une petite question. Je cherche comment faire pour insérer des boutons dans un canvas. Je m'explique. J'ai un rectangle avec 4 cerles et je voudrais que ces cercles soit cliquables afin de les faire changer de couleur. Je pensais à détecter la position de la souris lors du clic mais il me semble que c'est un peu trop fastidieux et qu'il doit y avoir une meilleure solution.

Merci d'avance.

[llaffont]

Hello,

Si tu t'es déjà fait "chi##" a créer un canvas avec 4 cercles tu devrais t'en sortir avec une détection du clique.

Car tes cercles sont dans une plage de coordonnées que tu as déjà fixé pour les créer. il te reste juste à comparer les coordonnées de ton clique avec la plage de tes cercles et puis changer la couleur.

Où est la difficulté ?

Mais pas curiosité maladive je vais quand même tester pour voir si c'est réalisable.

[VegaHives]

Le "problème" c'est que pour créer les cercles, je passe les coordonnées de mon canvas, or lorsque je veux récupérer les coordonnées de ma souris, ce sont celles du document.

[llaffont]

Effectivement ! on utilise "event.page" pour les coordonnées. J'avais lu une fonction qui te permettait de récupérer les coordonnées en fonction de l'objet parent.

J'esais de te retrouver ça.

Sinon en attendant tu peux faire 4 canvas l'un à coté de l'autre

[llaffont]

J'ai trouvé ça !
Cela peut être utile car il utilise un élément parent comme point 0.
Comme j'arrive pas à remettre la main sur mon bout de code.

http://jqueryui.com/demos/position/

[scorpking]

sinon si tu connais la position de ton canevas dans ta page il te suffit de les soustraire pour avoir le point d'origine de ton canevas

edit : voici un script qui te permet de déterminer quelque soit sa position le décalage par rapport au bord du document il tu suffit d'appliquer ce que je te disais si dessus pour déterminer la position de ta souris dans ton canvas et du coup j'ai la réponse a mon problème qui était exactement le même

http://www.webbricks.org/bricks/getPos/