recupérer la position de la souris en prenant en compte le scroll

**defender19** · 25/07/2012, 13h37

Bonjour!

je reviens vers vous avec de nouveau un petit problème...

J'ai canvas ou l'utilisateur doit tracé des points.
je récupère donc la position de la souris et trace le point à la bonne place, tout marche impeccable.
Malheureusement, le canvas fait 2000px de large, donc un scroll est mis en place pour tout couvrir.

Quand je défile le scroll vers la droite, j'ai beau cliquer quelque part, il me met le point bien plus à gauche, sur l'espace visible quand on déplace le scroll.

Il me faudrait donc récupérer la position de la souris en prenant en compte le déplacement de la souris... Quelqu'un a une idée pour faire cela ?

merci bien

Pour info voici le code :

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
 
var topY=getOffset(position).top;
var	topX=getOffset(position).left;
 
var position = document.getElementById('canvas');
 
position.addEventListener('click', function(e) {
 
	var x=e.clientX-topX;
	var y= e.clientY-topY;
 
	tracePoint(x, y);
 
}, false);
 
 
function getOffset(element) { 
	  var top = 0, left = 0;
 
	  do {
		  top += element.offsetTop;
		  left += element.offsetLeft;
	  } while (element = element.offsetParent); // Tant que ? element ? re?oit un ? offsetParent ? valide alors on additionne les valeurs des offsets
 
	  return { // On retourne un objet, cela nous permet de retourner les deux valeurs calcul?es
		  top: top,
		  left: left
	  };
}
 
function tracePoint(x, y){
	context.beginPath(); 
	context.arc(x, y, 5, 0, Math.PI*2); 
	context.fill(); 
	context.closePath();
}

**SpaceFrog** · 25/07/2012, 13h41

rajoute le scrollTop ? et scrollLeft ?

**defender19** · 25/07/2012, 13h53

C'est à dire ?

j'ai essayé avec le code qui suit (trouvé sur le net), ça ne change rien.

Code :

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

1
2
3
4
5
6
7
8
9
 
var x=getMousePosition(e)[0]-topX;
var y=getMousePosition(e)[1]-topY;
 
function getMousePosition(event){
	var e = event || window.event;
	var scroll = new Array((document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft,(document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop);
	return new Array(e.clientX + scroll[0] - document.body.clientLeft,e.clientY + scroll[1] - document.body.clientTop);
}

**NoSmoking** · 25/07/2012, 20h15

Bonjour,

Comment récupérer les coordonnées de la souris ?

ou une version plus compacte, enfin peut être

Code :

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

1
2
3
4
5
6
7
8
  function getPosMouse( e){
    e = e || event;
    var dE = document.documentElement,
        dB = document.body;
    var mX = e.pageX || ( e.clientX +( dE && dE.scrollLeft || dB && dB.scrollLeft || 0) -( dE.clientLeft || 0));
    var mY = e.pageY || ( e.clientY +( dE && dE.scrollTop  || dB && dB.scrollTop  || 0) -( dE.clientTop  || 0));
    return({ x : mX, y : mY});
  }

**defender19** · 26/07/2012, 10h29

Merci bien, mais ça ne prends toujours pas en compte le scroll.

Quand je ne change rien, je peux placer mes points comme je veux, mais dès que je déplace le scroll vers la droite, si je clique, le point est placé bien plus à gauche.

**NoSmoking** · 26/07/2012, 18h31

je pense que ton soucis vient de ta fonction getOffset(), ou encore de l'ordre d'appel de tes instructions qui semble farfelue.

Code :

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

1
2
3
4
var oCanvas = document.getElementById('canvas');
var pos  = getOffset( oCanvas);
var topY = pos.top;
var topX = pos.left;

**defender19** · 26/07/2012, 19h27

Je viens de tester dans le 'bon' ordre, avec la fonction proposée plus haut. Rien ne change

J'ai aussi tester la valeur de scrollLeft, elle vaut toujours 0, même en déplaçant le scroll.

Le problème vient peut être de la...

Ah et le scroll est propre à un div qui englobe le tout, avec en css pour le div : overflow: scroll

merci

**NoSmoking** · 26/07/2012, 21h55

qu'est ce que tu essaies de nous dire que tu cherches à connaître la position du clic dans une DIV qui elle même est en overflow:sroll et de plus dans une page qui peut scroller.

La structure du document devient du coup importante.

**defender19** · 26/07/2012, 22h15

Oui et non, il n'y a que le div qui peut scroller au final...

J'ai une structure comme suit :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<body>
 
<div overflow:sroll>
 
<canvas width=2000px heigth=416px>
</canvas>
 
 
</div>
</body>

**NoSmoking** · 26/07/2012, 23h08

il te faut donc tenir compte du scrollTop/Left de la DIV et non de la page, sauf si celle ci scroll également.

Code :

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

1
2
posClicX = e.clientX -oCanvas.posX -oDiv.scrollLeft;
posClicY = e.clientY -oCanvas.posY -oDiv.scrollTop;

où pas loin.

**Michaeljackfan** · 26/07/2012, 23h25

Salut,

J'ai apporté quelques modifications à ton code et ça fonctionne sous Google Chrome (pas sous IE, à cause de la méthode addEventListener) :

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
38
39
40
41
42
43
44
45
46
47
48
<html>
<head>
</head>
<body style="padding:0;margin:0;">
 
<div style="overflow:sroll;">
	<canvas width="2000px" heigth="416px" id="canvas" style="background-color:grey;">
	</canvas>
</div>
 
<script type="text/javascript">
 
	var position = document.getElementById('canvas');
 
	position.addEventListener("click",function(e) {
		var pos=getOffset(position);
		var x=e.clientX+pos.left;
		var y=e.clientY+pos.top;
 
		tracePoint(x, y);
 
	});
 
 
	function getOffset(element) { 
		  var top = 0, left = 0;
 
		  do {
			  top += element.offsetTop+element.scrollTop;
			  left += element.offsetLeft+element.scrollLeft;
		  } while (element = element.offsetParent); // Tant que ? element ? re?oit un ? offsetParent ? valide alors on additionne les valeurs des offsets
 
		  return { // On retourne un objet, cela nous permet de retourner les deux valeurs calcul?es
			  top: top,
			  left: left
		  };
	}
 
	function tracePoint(x, y){
		var context=position.getContext("2d");
		context.beginPath(); 
		context.arc(x, y, 5, 0, Math.PI*2); 
		context.fill(); 
		context.closePath();
	}
</script>
</body>
</html>

N'oublies pas qu'il faut recalculer le scroll à chaque clique, pas seulement au début. Il faut donc faire appelle à la fonction "getOffset" à chaque fois.
Et il faut ajouter la valeur d'offset, pas la retirer.

Voilà, avec ces deux modifications ça devrait fonctionner.
Tu avais aussi oublié de mettre "position.getContext('2d')", mais je suppose que tu ne l'avait pas oublié dans le code original.
Et puisque "getOffset" te renvoie à la fois top et left, inutile de l'appeler 2 fois

**defender19** · 27/07/2012, 09h27

Bon et bien problème résolu!

Il fallait bien faire : div.scrollLeft pour que ça marche.

J'ai donc au final, pour uniquement la partie récupération :

Code :

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

1
2
3
4
5
 
var div=document.getElementById('general');
var pos=getOffset(position);
var x=e.clientX-pos.left+div.scrollLeft;
var y=e.clientY-pos.top+div.scrollTop;

Merci à vous

J'ai pas compris cependant, Michaeljafckan, pourquoi faudrait-il ajouter la valeur d'offset ?

Mon canvas n'est pas au début de la page (en 0,0), il est sous des tableaux.
Je récupère donc la position de la souris par rapport à la page et j'enlève la position du canvas pour tomber dedans, ça se tient non ?

En tout cas merci bien!

**Michaeljackfan** · 27/07/2012, 15h56

Mon canvas n'est pas au début de la page (en 0,0), il est sous des tableaux.
Je récupère donc la position de la souris par rapport à la page et j'enlève la position du canvas pour tomber dedans, ça se tient non ?

Effectivement, j'avais mal visualisé.
Autant pour moi