Home > Article > Web Front-end > How to highlight an object when the mouse is over it using FabricJS?

How to highlight an object when the mouse is over it using FabricJS?

王林forward: 2023-08-29 11:21:16835browse

如何使用 FabricJS 当鼠标悬停在某个对象上时突出显示该对象？

We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized as any closed shape consisting of a set of connected straight line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties such as angle, opacity, etc. FabricJS provides us with an extensive set of events that we can use to create different effects.

Since we want the changes to occur on mouseover, we will use the mouse:move event that fires when the mouse is moved. Our second requirement is to highlight an object, this can be achieved by using the opacity property, however, when there are many objects on the canvas and we want to highlight the object that is hovering over it, We need to use the forEachObject method. This method runs a for-each loop for the given function, thereby executing it for each object.

grammar

forEachObject( callback: function, context: object ): Self

parameter

callback - This property accepts a function that takes the current object as the first argument, the index as the second argument, and An array of all objects as the third one.
context - This property accepts an Object that represents the context in which the callback function was called.

Example 1: Display highlight effect with only one object

Let's look at a code example to see how to add a highlight effect when there is only one object on the canvas. We have attached the mouseover and mouseout events to the polygon object (in this case, the triangle). mouseover Executed when the mouse moves over the object, mouseout Executed when the mouse hovers outside the object. As soon as we move the cursor over the element, its opacity will change from 0.5 to 1 and vice versa.

<!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>Displaying highlight effect with only one object</h2>
   <p>
      You can see that the object is being highlighted when the cursor is moved onto the element
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a points array
      var points = [
         { x: 30, y: 50 },
         { x: 0, y: 0 },
         { x: 60, y: 0 },
      ];
      
      // Initiating a polygon object
      var triangle = new fabric.Polygon(points, {
         left: 100,
         top: 40,
         fill: "#1e90ff",
         strokeWidth: 4,
         stroke: "green",
         flipY: true,
         scaleX: 2,
         scaleY: 2, 
         opacity: 0.5,
      });
      
      // Adding it to the canvas
      canvas.add(triangle);
      
      // Using mouseover event
      triangle.on("mouseover", () => {
         triangle.set("opacity", 1);
         canvas.renderAll();
      });
      
      // Using mouseout event
      triangle.on("mouseout", () => {
         triangle.set("opacity", 0.5);
         canvas.renderAll();
      });
   </script>
</body>
</html>

Example 2: Display the highlight effect of multiple objects

In this example, we will see how to highlight an object when the mouse is hovering over it. Every time the mouse moves, the mouse:move event is triggered. Here we use the mathematical distance formula to calculate the distance between two points in the coordinate plane through the "x" and "y" positions of the mouse pointer. This distance is then divided by 50, which is an arbitrary number that makes (dist/50) the fraction smaller (we know that as the denominator gets larger, the fraction gets smaller), so that when it is divided by 1, we get a The value is larger and the opacity increases.

<!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>Displaying highlight effect with multiple objects</h2>
   <p>
      You can see that an object is being highlighted only when the cursor is moved onto the element and is depended on the distance
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a points array
      var points = [
         { x: 30, y: 50 },
         { x: 0, y: 0 },
         { x: 60, y: 0 },
      ];
      
      // Initiating a polygon object
      var triangle = new fabric.Polygon(points, {
         left: 100,
         top: 40,
         fill: "#1e90ff",
         strokeWidth: 4,
         stroke: "green",
         flipY: true,
         scaleX: 2,
         scaleY: 2,
         opacity: 0.5,
      });
      
      // Adding it to the canvas
      canvas.add(triangle);
      
      // Using clone method
      triangle.clone(function (c) {
         canvas.add(
            c.set({
               left: 500,
               top: 79,
               angle: 15,
               scaleX: 0.7,
               scaleY: 0.7,
               fill: "red",
            })
         );
      });
      
      // Using clone method
      triangle.clone(function (c) {
         canvas.add(
            c.set({
               left: 340,
               top: 90,
               angle: -15,
               scaleX: 2,
               scaleY: 2,
               fill: "black",
            })
         );
      });
      
      // Using clone method
      triangle.clone(function (c) {
         canvas.add(
            c.set({
               left: 280,
               top: 190,
               angle: 21,
               scaleX: 0.9,
               scaleY: 0.9,
               fill: "#ffa500",
            })
         );
      });
      
      // Using mouse:move event
      canvas.on("mouse:move", (options) => {
        
        // Get the mouse coordinates
         var p = canvas.getPointer(options.e);
         canvas.forEachObject(function (obj) {
            
            // Get distance between objects and mouse pointer
            var distX = Math.abs(p.x - obj.left),
            distY = Math.abs(p.y - obj.top),
            dist = Math.round(
               Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2))
            );
            
            // Update the opacity as a proportion of distance
            obj.set("opacity", 1 / (dist / 50));
         });
         canvas.renderAll();
      });
   </script>
</body>
</html>

in conclusion

In this tutorial, we use two simple examples to demonstrate how to use FabricJS to highlight objects when the mouse is hovering over them.

The above is the detailed content of How to highlight an object when the mouse is over it using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

Object for 回调函数循环指针对象事件 fabric

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to create an analog clock using HTML, CSS and JavaScript?Next article：How to create an analog clock using HTML, CSS and JavaScript?

See more