Trouver la position de la souris par rapport à l'élément

Question

Je veux faire une petite application de peinture en utilisant la toile. J'ai donc besoin de trouver la position de la souris sur la toile.

Answer 1

Pour les personnes à l'aide de JQuery:

Parfois, lorsque vous avez les éléments imbriqués, l'un d'eux avec l'événement attaché à elle, il peut être difficile de comprendre ce que votre navigateur voit que le parent. Ici, vous pouvez spécifier les parents.

Vous prenez la position de la souris, puis soustraire le parent de l'élément en position de décalage.

var x = evt.pageX - $('#element').offset().left
var y = evt.pageY - $('#element').offset().top

Si vous essayez d'obtenir la position de la souris sur une page à l'intérieur d'un volet de défilement:

var x = (evt.pageX - $('#element').offset().left) + self.frame.scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + self.frame.scrollTop();

Ou la position par rapport à la page:

var x = (evt.pageX - $('#element').offset().left) + $(window).scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + $(window).scrollTop();

Answer 2

Ceci calcule la relation positiin de la souris avec l'élément canvas:

 var X = e.pageX - this.offsetLeft 
var Y = e.pageY - this.offsetTop
 

Cela a fonctionné avec Chrome, Safari, Firefox et Opera. IE 9 a donné un message qui ne prend pas en charge CANVAS.

Answer 3

Un bon d'écrire de la difficulté de ce problème peut être trouvée ici: http://www.quirksmode.org/js/events_properties.html#position

À l'aide de la technique qui y est décrite, vous pouvez trouver la position de la souris dans le document. Alors que vous venez de vérifier pour voir si elle est à l'intérieur de la boîte englobante de votre élément, que vous pouvez trouver en appelant élément.getBoundingClientRect() qui retourne un objet avec les propriétés suivantes: { bas, hauteur, gauche, droite, haut, largeur }. À partir de là, il est trivial de savoir si le même qui s'est passé à l'intérieur de votre élément ou non.

Answer 4

Je répondais +1 à Mark van Wyk, car cela me permettait d'aller dans la bonne direction, mais ne me réglait pas tout à fait. Il me restait encore un décalage sur la peinture dans des éléments contenus dans un autre élément.

Suite à cela résolu pour moi:

         x = e.pageX - this.offsetLeft - $(elem).offset().left;
        y = e.pageY - this.offsetTop - $(elem).offset().top;
 

En d'autres termes - j'ai simplement empilé tous les décalages de tous les éléments imbriqués

Answer 5

vous pouvez l'obtenir par

 var element = document.getElementById(canvasId);
element.onmousemove = function(e) {
    var xCoor = e.clientX;
    var yCoor = e.clientY;
}