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

How to make a polygon object react to mouse events using FabricJS?

WBOYforward: 2023-08-31 14:37:08657browse

如何使用 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 mouseup and mousedown events to demonstrate how polygon objects react to user-triggered mouse events.

grammar

polygon.on(“mouseup”, callbackFunction);
polygon.on(“mousedown”, callbackFunction);

Example 1: Show how an object responds to mouseup events

Let's look at a code example to see how a polygon object reacts when the mouseup event is fired. When the user releases the left mouse button, the mouseup event occurs. Here, once the mouseup event is triggered, the stroke width will become 33.

<!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 mouseup event</h2>
   <p>
      You can select the object and release the left mouse button to see that the stroke width has changed
   </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: 0, y: 0 },
            { x: 0, y: 50 },
            { x: 50, y: 50 },
            { x: 50, y: 0 },
         ],
         {
            left: 100,
            top: 30,
            fill: "red",
            stroke: "blue",
            strokeWidth: 2,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the mouseup event
      polygon.on("mouseup", () => {
         polygon.set("strokeWidth", 33);
         canvas.renderAll();
      });
   </script>
</body>
</html>

Example 2: Show how the object responds to the mousedown event

Let's look at a code example to see how a polygon object reacts when the mousedown event is fired. When the user presses the button, the mousedown event occurs. Here we can see that the object responds to the mousedown event by changing its stroke width from 33 to 2.

<!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 mousedown event</h2>
   <p>
      You can press the left mouse button to trigger the mousedown event to see that the stroke width has changed
   </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: 0, y: 0 },
            { x: 0, y: 50 },
            { x: 50, y: 50 },
            { x: 50, y: 0 },
         ],
         {
            left: 100,
            top: 30,
            fill: "red",
            stroke: "blue",
            strokeWidth: 33,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the mousedown event
      polygon.on("mousedown", () => {
         polygon.set("strokeWidth", 2);
         canvas.renderAll();
      });
   </script>
</body>
</html>

in conclusion

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

The above is the detailed content of How to make a polygon object react to mouse 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 convert Hex value to RGBA value using JavaScript?Next article：How to convert Hex value to RGBA value using JavaScript?

See more

How to make a polygon object react to mouse events using FabricJS?

grammar

Example 1: Show how an object responds to mouseup events

Example 2: Show how the object responds to the mousedown event

in conclusion

Related articles