search

Home >Web Front-end >JS Tutorial >How to create a rectangle that helps the cursor hover over an object using FabricJS?

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

WBOY
WBOYforward
2023-08-27 23:33:02914browse

如何使用 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)

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.

    • Option Key

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

    Example 1

    Pass the key to hoverCursor class

    By default, when we hover the mouse in the canvas When on a rectangular object, the cursor type is "Move". Let's look at a code example of creating a canvas using

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

    Example 2

    Demonstrate that this only affects instances

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

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!

字符串 对象 ul
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to wrap setTimeout() method in Promise?Next article：How to wrap setTimeout() method in Promise?

Related articles

See more