Affichage des Coordonnées du Pointeur
Objectifs
Les objectifs de cette vidéo sont :
- Comprendre comment capturer des événements de la souris en Svelte.
- Apprendre à accéder aux propriétés de l'objet event.
- Savoir afficher dynamiquement des données en utilisant Svelte.
Résumé
Découvrez comment utiliser des fonctions événementielles en Svelte pour capturer et afficher les coordonnées x et y du pointeur de la souris sur une image.
Description
Cette leçon vous montre comment utiliser Svelte pour capturer un événement mouseMove et afficher les coordonnées du pointeur de la souris sur une image. Vous allez apprendre à définir une fonction événementielle qui utilise l'objet event pour récupérer les propriétés offsetX et offsetY de la souris. La vidéo illustre comment afficher ces coordonnées dynamiquement au-dessus d'une image spécifiée dans les assets. À la fin de cette leçon, vous saurez comment manipuler les événements souris de manière efficace sans passer explicitement l'objet event à la fonction.
Dans la mise en œuvre, vous verrez comment initialiser une variable Svelte pour stocker les coordonnées et comment utiliser l'interpolation pour les afficher en temps réel.