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

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

WBOY

Release： 2023-08-27 23:33:02

forward

904 people have browsed it

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

In this tutorial, we will use FabricJS to create a rectangle with a help cursor hovering over the object. "help" is one of the native cursor styles available and can also be used in the FabricJS canvas. FabricJS provides various types of cursors such as default, full scroll, crosshair, column resize, row resize, etc. which actually reuse the native cursor under the hood. 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 properties of the object related to the hoverCursor property, such as color, cursor, stroke width, and many other properties.

hoverCursor - This property accepts a string that determines the hover The name of the cursor used when resting on the canvas object. Using this we can set the default cursor value when hovering over this rectangular object on the canvas.

Pass the key to hoverCursor class

>help Hover the cursor 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 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>

Copy after login

Demonstrate that this only affects instances

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

Copy after login

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