Home >Web Front-end >JS Tutorial >How to create a polygon with polylines using FabricJS?

How to create a polygon with polylines using FabricJS?

WBOYforward: 2023-08-31 17:49:081046browse

如何使用 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. Since Polygon extends fabric.Polyline, we can create a polygon instance using polyline nicely.

grammar

new fabric.Polyline( points: Array, options: Object )

parameter

points − This parameter accepts an Array, which represents the array of points that make up the polygon object, where each point is located with x and y Object.
Options (optional) - This parameter is an object that provides additional customization for our object. Use this parameter to change the origin, stroke width, and many other properties associated with the Polygon object.

Example 1: Create a Fabric.Polygon() instance and add it to the canvas

Let's look at a code example of how to create a polygon by creating an instance of fabric.Polygon. Since the Polygon class extends fabric.Polyline, it inherits its properties and methods, establishing a relationship between them.

<!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>
      Creating an instance of fabric.Polygon() and adding it to our canvas
   </h2> 
   <p>You can see that a Polygon object has been added to the canvas</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 polygon object
      var polygon = new fabric.Polygon(
         [
            { x: -20, y: -35 },
            { x: 20, y: -35 },
            { x: 40, y: 0 },
            { x: 20, y: 35 },
            { x: -20, y: 35 },
            { x: -40, y: 0 },
         ],
         {
            top: 50,
            left: 50,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>

Example 2: Create a Fabric.Polyline() instance and add it to the canvas

Let's look at a code example of how to create a polygon by creating an instance of fabric.Polyline. We need to specify an array containing the x and y coordinates of the polygon we want to create and add any optional properties to be included in the options object. In this example, we create a square, which is a polygon with four equal sides and four equal angles.

<!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>
      Creating an instance of fabric.Polyline() and adding it to our canvas
   </h2>
   <p>You can see that a Polygon object has been added to the canvas</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 polyline object
      var polygon = new fabric.Polyline(
         [
            { x: 0, y: 0 },
            { x: 50, y: 0 },
            { x: 50, y: 50 },
            { x: 0, y: 50 },
         ],
         {
            top: 50,
            left: 50,
            fill: "green",
         }
      );
      
      // Adding it to the canvas 
      canvas.add(polygon);
   </script>
</body>
</html>

in conclusion

In this tutorial, we use two simple examples to demonstrate how to create polygons with polylines using FabricJS.

The above is the detailed content of How to create a polygon with polylines using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

Array 继承对象 fabric

Statement：

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

Previous article：How to find the complexity of a Line instance using FabricJS?Next article：How to find the complexity of a Line instance using FabricJS?

See more