Comment mettre en évidence un objet lorsque la souris passe dessus à l'aide de FabricJS ?

Nous pouvons créer un objet Polygon en créant une instance defabric.Polygon. Un objet polygone peut être caractérisé comme n’importe quelle forme fermée constituée d’un ensemble de segments de ligne droite connectés. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés telles que l'angle, l'opacité, etc. FabricJS nous fournit un ensemble complet d'événements que nous pouvons utiliser pour créer différents effets.

Puisque nous voulons que les changements se produisent au survol de la souris, nous utiliserons l'événementmouse:movequi se déclenche lorsque la souris bouge. Notre deuxième exigence est de mettre en évidence un objet, cela peut être réalisé en utilisant la propriétéopacity, cependant, lorsqu'il y a beaucoup d'objets sur le canevas et que nous voulons mettre en évidence l'objet qui survole celui-ci, nous devons utiliserforEachObjectméthode. Cette méthode exécute une boucle for-each pour la fonction donnée, l'exécutant ainsi pour chaque objet.

Grammaire

forEachObject( callback: function, context: object ): Self

Paramètres

• callback- Cette propriété accepte unefonctionqui prend l'objet actuel comme premier argument, l'index comme deuxième argument et un tableau de tous les objets comme troisième.

• context- Cette propriété accepte unObjectqui représente le contexte dans lequel la fonction de rappel est appelée.

Exemple 1 : Afficher l'effet de surbrillance avec un seul objet

Regardons un exemple de code pour voir comment ajouter un effet de surbrillance lorsqu'il n'y a qu'un seul objet sur le canevas. Nous avons attaché les événementsmouseoveretmouseoutà l'objet polygone (dans ce cas, le triangle).mouseoverest exécuté lorsque la souris se déplace sur l'objet,mouseoutest exécuté lorsque la souris survole l'objet. Dès que l'on déplace le curseur sur l'élément, son opacité passera de 0,5 à 1 et vice versa.

     
  
Displaying highlight effect with only one object
 
 You can see that the object is being highlighted when the cursor is moved onto the element 
    

Exemple 2 : Afficher l'effet de surbrillance de plusieurs objets

Dans cet exemple, nous verrons comment mettre en évidence un objet lorsque la souris le survole. Chaque fois que la souris bouge, l'événementmouse:moveest déclenché. Ici, nous utilisons la formule mathématique de distance pour calculer la distance entre deux points dans le plan de coordonnées via les positions « x » et « y » du pointeur de la souris. Cette distance est ensuite divisée par 50, qui est un nombre arbitraire qui rend la fraction (dist/50) plus petite (nous savons que plus le dénominateur grandit, plus la fraction diminue), de sorte que lorsqu'elle est divisée par 1, nous obtenons a La valeur est plus grande et l'opacité augmente.

     
  
Displaying highlight effect with multiple objects
 
 You can see that an object is being highlighted only when the cursor is moved onto the element and is depended on the distance 
    

Conclusion

Dans ce tutoriel, nous utilisons deux exemples simples pour montrer comment mettre en évidence des objets au survol de la souris à l'aide de FabricJS.

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!