recupérer la position de la souris en prenant en compte le scroll
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:
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();
} |
