Discussion :

[defender19]

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]

rajoute le scrollTop ? et scrollLeft ?

[defender19]

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]

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]

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]

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;