How to create a rectangle that waits for the cursor to hover over an object using FabricJS?-JS Tutorial-php.cn

How to create a rectangle that waits for the cursor to hover over an object using FabricJS?

PHPz

Release： 2023-08-23 16:29:02

forward

687 people have browsed it

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

In this tutorial, we will use FabricJS to create a rectangle with an object that waits for the cursor to hover over it. wait is one of the native cursor styles available and can also be used in FabricJS canvas. FabricJS provides various types of cursors like default, full scroll, crosshair, column resize, row resize, etc. which reuse the native cursor behind the scenes. hoverCursor Property sets the style when the cursor is hovering over the canvas object.

Syntax

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

Copy after login

Parameters

Options (optional) - This parameter is a ## that provides additional customization #Object to our rectangle. Using this parameter, you can change the color, cursor, stroke width, and many other properties of the object related to the hoverCursor property.

Options Keys

##hoverCursor
- This property accepts a String, which determines the cursor The name is used when hovering over the canvas object. Using this function we can set the default cursor value when hovering over this rectangular object on the canvas.

Pass the key of the

hoverCursor class By default, when we When hovering over a rectangular object in the canvas, the cursor type is Move. Let's look at a code example for creating a canvas with a

wait

cursor when hovering over a rectangle object in 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>

Copy after login

Example 2

Demonstrates that it only affects the instance

In this example we pass the

hoverCursor

key to the Rectangle class , which means that the hoverCursor property of each object in the canvas will not change. Changes occur only for that single object. The following code example illustrates this -

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

Copy after login

The above is the detailed content of How to create a rectangle that waits for the cursor to hover over an object using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!