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

Comment créer un rectangle qui aide le curseur à survoler un objet à l'aide de FabricJS ?

WBOY

Libérer： 2023-08-27 23:33:02

avant

856 Les gens l'ont consulté

如何使用 FabricJS 创建一个帮助光标悬停在对象上的矩形？

Dans ce tutoriel, nous utiliserons FabricJS pour créer un rectangle avec un curseur assistant survolant l'objet. "help" 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 tels que le curseur par défaut, le défilement complet, le réticule, le redimensionnement des colonnes, le redimensionnement des lignes, etc. qui réutilisent en fait le curseur natif sous le capot. 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 les propriétés de l'objet liées à la propriété hoverCursor, telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés.

Option Key

hoverCursor - Cette propriété accepte une string qui détermine le nom du curseur utilisé lors du survol de l'objet canevas. En l'utilisant, nous pouvons définir la valeur par défaut du curseur lorsque vous survolez cet objet rectangulaire sur le canevas.

Exemple 1

Passez la clé à la classe hoverCursor

Par défaut, lorsque nous passons la souris sur un objet rectangulaire dans le canevas, le type de curseur est "déplacer". Regardons un exemple de code de création d'un canevas à l'aide de >help Passez le curseur sur un objet rectangle 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 help 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: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#faf0e6",
         padding: 9,
         stroke: "#9370db",
         strokeWidth: 5,
         hoverCursor: "help",
      });

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

Copier après la connexion

Exemple 2

Preuve que cela n'affecte que les instances

Dans cet exemple, nous passons 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 and observe that the help cursor applies to the left object only. We have not used the <b>hoverCursor</b> property on the right object.</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: "help",
      });

      // 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!