Home > Article > Web Front-end > How to make a polygon object react to selected and deselected events using FabricJS?

How to make a polygon object react to selected and deselected events using FabricJS?

WBOYforward: 2023-09-21 09:41:111374browse

如何使用 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. We use the selected and deselected events to demonstrate how to make a polygon object react to the user selecting and deselecting objects.

grammar

polygon.on("selected", callbackFunction);
polygon.on("deselected", callbackFunction);

Example 1: Show how an object reacts to selected events

Let's look at a code example of how to make a polygon object react to the selected event. Clicking the object will trigger the selected event that executes the callback function. In this case, whenever we click on the polygon object, its fill color changes and the recorded output is displayed.

<!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 how the object reacts to the selected event</h2>
   <p>Select the object to see the event callback function fired</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 polygon instance
      var polygon = new fabric.Polygon(
         [
            { x: 500, y: 20 },
            { x: 550, y: 60 },
            { x: 550, y: 200 },
            { x: 350, y: 200 },
            { x: 350, y: 60 },
            { x: 500, y: 20 },
         ],
         {
            fill: "black",
            stroke: "blue",
            strokeWidth: 2,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the selected event
      polygon.on("selected", () => {
         polygon.fill = "blue";
         canvas.renderAll();
         console.log("The polygon object is selected");
      });
   </script>
</body>
</html>

Example 2: Show how an object reacts to a deselection event

Let's look at a code example to see how to make a Polygon object react to a deselect event. Here, once the polygon object is deselected, the event is fired, thereby changing the fill color as well.

<!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 how the object reacts to the deselected event</h2>
   <p>Deselect the object to see the event callback function fired</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 polygon instance
      var polygon = new fabric.Polygon(
         [
            { x: 500, y: 20 },
            { x: 550, y: 60 },
            { x: 550, y: 200 },
            { x: 350, y: 200 },
            { x: 350, y: 60 },
            { x: 500, y: 20 },
         ],
         {
            fill: "red",
            stroke: "blue",
            strokeWidth: 2,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas 
      canvas.add(polygon);
      
      // Using the deselected event
      polygon.on("deselected", () => {
         polygon.fill = "black";
         canvas.renderAll();
         console.log("The polygon object is deselected");
      });
   </script>
</body>
</html>

in conclusion

In this tutorial, we use two simple examples to demonstrate how to use FabricJS to make a polygon object react to selected and deselected events.

The above is the detailed content of How to make a polygon object react to selected and deselected events using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

回调函数对象事件 fabric

Statement：

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

Previous article：How to set the fill color of a rectangle using FabricJS?Next article：How to set the fill color of a rectangle using FabricJS?

See more

How to make a polygon object react to selected and deselected events using FabricJS?

grammar

Example 1: Show how an object reacts to selected events

Example 2: Show how an object reacts to a deselection event

in conclusion

Related articles