Comment obtenir les coordonnées de la souris par rapport à un élément du canevas ?

Obtention des coordonnées de la souris par rapport à l'élément de toile

Dans le but de créer une application de peinture simple basée sur une toile, un défi courant consiste à déterminer le position de la souris sur la toile.

Solution

Une L'approche pour résoudre ce problème consiste à utiliser la propriété BoundingClientRect. Ceci peut être mis en œuvre comme suit :

<code class="javascript">document.getElementById('clickme').onclick = function(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
  console.log("Left: " + x + " ; Top: " + y + ".");
};</code>

Exemple

<code class="html"><div id="clickme">
  Click Me -<br>
  (this box has margin-left: 100px; margin-top: 20px;)
</div></code>

Explication

1. Lorsque le clique sur l'élément clickme, le gestionnaire d'événements onclick est déclenché.
2. Le La méthode getBoundingClientRect() récupère la position et la taille de l'élément par rapport à la fenêtre.
3. Les propriétés e.clientX et e.clientY représentent la position absolue de la souris dans la fenêtre.
4. En soustrayant rect.left et rect.top à partir de ces coordonnées absolues, on obtient la position de la souris par rapport au coin supérieur gauche de l'élément coin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!