Comment obtenir la position de la souris par rapport à un élément dans une application de peinture JavaScript ?

Recherche de la position de la souris par rapport à un élément dans une application de peinture

Déterminer la position de la souris par rapport à un élément est crucial pour créer des applications interactives, telles que comme application de peinture. Pour accomplir cela sur un canevas, vous devez utiliser le bon code JavaScript.

Solution :

Comme une solution sans jQuery n'était pas facilement disponible, voici une alternative approche :

<code class="js">document.getElementById('clickme').onclick = function(e) {
  // e = Mouse click event
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left; // x position within the element
  var y = e.clientY - rect.top; // y position within the element
  console.log("Left? : " + x + " ; Top? : " + y + ".");
}</code>

Utilisation :

Ce code utilise la méthode getBoundingClientRect() pour obtenir les limites de l'élément par rapport au document. Les propriétés clientX et clientY de l'événement mouse sont ensuite utilisées pour calculer la position de la souris au sein de l'élément.

HTML et CSS :

Pour tester le code, créez un élément avec le code HTML et CSS suivant :

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

<code class="css">#clickme {
  margin-top: 20px;
  margin-left: 100px;
  border: 1px solid black;
  cursor: pointer;
}</code>

Lorsque vous cliquez sur l'élément "Cliquez sur moi", la console affichera la position de la souris par rapport au coin supérieur gauche de l'élément. Ces informations sont essentielles pour capturer avec précision les mouvements et les interactions de la souris au sein de votre application de peinture.

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!