Comment créer un rectangle qui attend que le curseur passe sur un objet à l'aide de FabricJS ?

Dans ce tutoriel, nous utiliserons FabricJS pour créer un rectangle avec un objet qui attend que le curseur passe dessus. wait est l'un des styles de curseur natifs disponibles et peut également être utilisé dans le canevas FabricJS. FabricJS fournit différents types de curseurs comme par défaut, défilement complet, réticule, redimensionnement de colonne, redimensionnement de ligne, etc. qui réutilisent le curseur natif en arrière-plan. La propriétéhoverCursordéfinit le style lorsque le curseur survole l'objet canevas.

Syntaxe

new fabric.Rect({ hoverCursor: String }: Object)

Paramètres

• Options (facultatif)- Ce paramètre est unobjetqui fournit une personnalisation supplémentaire à notre rectangle. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés de l'objet liées à la propriétéhoverCursor.

Options Keys

• hoverCursor- Cette propriété accepte uneStringqui détermine le nom du curseur utilisé pour survoler l'objet canevas. En utilisant cette fonction, nous pouvons définir la valeur par défaut du curseur lorsque vous survolez cet objet rectangulaire sur le canevas.

Exemple 1

Passage des touches de la classehoverCursor

Par défaut, lorsque l'on passe la souris sur un objet rectangulaire dans le canevas, le type de curseur est déplacer. Examinons un exemple de code pour créer un canevas avec un curseurattendrelors du survol d'un objet rectangulaire dans FabricJS.

     
  
Passing the hoverCursor key to the class
 
Hover over the rectangle to see the wait cursor
    

Exemple 2

Démontre qu'il n'affecte que les instances

Dans cet exemple, nous transmettons la cléhoverCursorà la classe rectangle, ce qui signifie que la propriétéhoverCursorde chaque objet du canevas ne changera pas . Les modifications se produisent uniquement pour cet objet unique. L'exemple de code ci-dessous illustre cela -

     
  
Demonstrating that it affects the instance only
 
Hover over the rectangle objects to see that wait cursor applies to the left rectangle only. We have not applied the hoverCursor property on the rectangle that is on the right.
    

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!