[HTML 5] [canvas] coordonnées d'un clic souris - pointeur (curseur) souris [Résolu]

El Saigneur · 21/11/2010, 14h56

Bonjour,

Je suis sous Firefox 3.6.12 sous Linux / Ubuntu 10.10. Sur un canvas HTML 5, les coordonnées du clic souris que je récupère semblent légèrement décalées par rapport au bout de la flèche qui représente le pointeur (le curseur) de ma souris. J'utilise le code ci-dessous qui dessine un point sur un canvas HTML 5 à l'endroit du clic. Le point ne se dessine pas au bout de la flèche mais légèrement en bas à droite sous la flèche.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<script type="text/javascript">
function init() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width = 0.75 * screen.width;
  canvas.height = 0.75 * screen.height;   
}
 
function mouseDownEventHandler(e) {
  drawPoint(e.clientX, e.clientY);
}
 
function drawPoint(x, y){
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.arc(x,y,2,0,2*Math.PI,false);
  ctx.fill();
  ctx.closePath();
}
 
</script>
 
<style type="text/css">  
  canvas { border: 1px solid black; }  
</style> 
 
</head>
<body onload="init();">
 
   <canvas id="canvas" width="300" height="300" onmousedown="mouseDownEventHandler(event);">
     <p>This example requires a browser that supports the
     <a href="http://www.w3.org/html/wg/html5/">HTML5</a> 
     &lt;canvas&gt; feature.</p>
   </canvas>
 
</body>

Est-ce dû en fait que le curseur en forme de flèche fait plusieurs pixels de large et plusieurs pixels de haut et donc, l'endroit exact du clic par défaut est le milieu du carré que prend le curseur ? Si c'est le cas, comment faire en sorte de récupérer les coordonnées du bout de la flèche au moment du clic plutôt que celle du centre du curseur en forme de flèche ?

Ou est-ce autre chose ?

Merci d'avance pour votre aide

thelvin · 07/02/2011, 03h11

clientX/clientY sont les positions de la souris par rapport à la partie visible de la page page (en gros, le premier pixel blanc d'une page de fond blanc.)

Or, là, ton canvas n'est pas tout-à-fait en haut à gauche : d'abord il a une bordure, et puis en général ils ont aussi une marge CSS par défaut, et <body> un padding CSS par défaut. Bref le canvas n'est pas au début de la page au pixel près.

Je sais qu'avec firefox, une solution simple est de mettre le <canvas> en position relative, mais en laissant zéro à top et left, ce qui en fait un layer. Du coup on obtient les coordonnées du clic sur le canvas avec event.layerX et event.layerY . Mais je ne sais pas si c'est bien standard.

Autre possibilité, plus standard : obtenir d'une part la position du canvas sur la page, et d'autre part la position du clic sur la page avec event.pageX et event.pageY . Faire les maths pour voir où le clic a eu lieu sur le canvas. C'est passablement plus simple de faire ce genre de choses avec jQuery ou autre, je reconnais.

El Saigneur · 08/02/2011, 21h52

Merci beaucoup thelvin.
Je n'avais pas conscience que la coordonnée du clic était relative à la page dans sa globalité et non juste au canvas. Ça semble assez évident maintenant que vous m'y avez fait penser. J'aurai pu m'en douter...
Bref, j'ai donc opté pour la méthode standard et fait quelques additions et soustractions et ça marche nickel.

Merci encore

07/02/2011, 03h11	#2
thelvin Expert Confirmé Sénior Inscription : septembre 2004 Messages : 5 026 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 5 026 Points : 6 928 Points : 6 928	clientX/clientY sont les positions de la souris par rapport à la partie visible de la page page (en gros, le premier pixel blanc d'une page de fond blanc.) Or, là, ton canvas n'est pas tout-à-fait en haut à gauche : d'abord il a une bordure, et puis en général ils ont aussi une marge CSS par défaut, et <body> un padding CSS par défaut. Bref le canvas n'est pas au début de la page au pixel près. Je sais qu'avec firefox, une solution simple est de mettre le <canvas> en position relative, mais en laissant zéro à top et left, ce qui en fait un layer. Du coup on obtient les coordonnées du clic sur le canvas avec event.layerX et event.layerY . Mais je ne sais pas si c'est bien standard. Autre possibilité, plus standard : obtenir d'une part la position du canvas sur la page, et d'autre part la position du clic sur la page avec event.pageX et event.pageY . Faire les maths pour voir où le clic a eu lieu sur le canvas. C'est passablement plus simple de faire ce genre de choses avec jQuery ou autre, je reconnais.
	00

08/02/2011, 21h52	#3
El Saigneur Membre du Club Inscription : octobre 2003 Messages : 143 Détails du profil Informations forums : Inscription : octobre 2003 Messages : 143 Points : 40 Points : 40	Merci beaucoup thelvin. Je n'avais pas conscience que la coordonnée du clic était relative à la page dans sa globalité et non juste au canvas. Ça semble assez évident maintenant que vous m'y avez fait penser. J'aurai pu m'en douter... Bref, j'ai donc opté pour la méthode standard et fait quelques additions et soustractions et ça marche nickel. Merci encore
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email