Comment créer un rectangle qui attend que le curseur passe sur un objet à l'aide de FabricJS ?-js tutoriel-php.cn

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

PHPz

Libérer： 2023-08-23 16:29:02

avant

686 Les gens l'ont consulté

如何使用 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é hoverCursor définit le style lorsque le curseur survole l'objet canevas.

Syntaxe

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

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet qui 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 une String qui 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 classe hoverCursor

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 curseur attendre lors du survol d'un objet rectangulaire dans FabricJS.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Passing the hoverCursor key to the class</h2>
   <p>Hover over the rectangle to see the wait cursor</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#faf0e6",
         padding: 9,
         stroke: "#9370db",
         strokeWidth: 5,
         hoverCursor: "wait",
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Copier après la connexion

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é hoverCursor de chaque objet du canevas ne changera pas . Les modifications se produisent uniquement pour cet objet unique. L'exemple de code ci-dessous illustre cela -

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Demonstrating that it affects the instance only</h2>
   <p>Hover over the rectangle objects to see that wait cursor applies to the left rectangle only. We have not applied the <b>hoverCursor</b> property on the rectangle that is on the right.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect1 = new fabric.Rect({
         left: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#faf0e6",
         padding: 9,
         stroke: "#9370db",
         strokeWidth: 5,
         hoverCursor: "wait",
      });

      // Initiate another rectangle object
      var rect2 = new fabric.Rect({
         left: 325,
         top: 90,
         width: 170,
         height: 70,
         fill: "#9370db",
         padding: 9,
         stroke: "#e6e6fa",
         strokeWidth: 5,
      });

      // Add them to the canvas
      canvas.add(rect1);
      canvas.add(rect2);
   </script>
</body>
</html>

Copier après la connexion

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!