Maison > interface Web > js tutoriel > Comment puis-je obtenir des coordonnées précises de clic de souris sur un élément de canevas ?

Comment puis-je obtenir des coordonnées précises de clic de souris sur un élément de canevas ?

Mary-Kate Olsen
Libérer: 2024-12-09 06:54:07
original
832 Les gens l'ont consulté

How Can I Get Precise Mouse Click Coordinates on a Canvas Element?

Détermination des coordonnées des clics de souris sur les éléments du canevas

Récupérer les coordonnées précises des clics de souris dans un élément du canevas est un besoin courant dans diverses applications de programmation . Le guide suivant fournit une approche simple pour les navigateurs Web, notamment Safari, Opera et Firefox.

Solution multi-navigateurs

Pour obtenir une solution simple et multi-navigateurs, une fonction JavaScript nommée getCursorPosition peut être définie :

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    console.log("x: " + x + " y: " + y);
}
Copier après la connexion

Cette fonction calcule les coordonnées relatives à l'élément canvas lui-même.

Gestion des événements

Pour attacher cette fonctionnalité à un élément de canevas, ajoutez un écouteur d'événement pour les événements avec la souris enfoncée :

const canvas = document.querySelector('canvas');
canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e);
});
Copier après la connexion

Une fois un clic de souris est détecté, la fonction getCursorPosition est invoquée et les coordonnées x et y du clic sont enregistrées dans la console.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal