How are polygons different from polylines in FabricJS?

We can create Polyline objects by creating instances of fabric.Polyline, and fabric.Polygon can be used to create Polygon instances. A polyline object can be represented by 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.

Polygons always connect the first point to the last point to form a closed area, while polylines do not. This can be demonstrated by the example given below.

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 polyline object.

• Options (optional) - This parameter is an object that provides additional customization to our object. Use this parameter to change the origin, stroke width, and many other properties associated with the Polyline object.

Example 1

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

Let's look at a code example to see how to add a polyline object to the canvas. The only required parameter is the points array, while the second parameter is an optional options object. Additionally, we will use the same points array in the Polygon to demonstrate the difference.

   
   

 

   
Creating an instance of fabric.Polyline() and adding it to our canvas
   
You can see that the polyline object doesn’t connects start to end
   
   

 

Example 2

Create an instance of fabric.Polygon() and add it to our canvas

Let's look at a code example to see how to add a polygon object to the canvas. The only required parameter is the points array, while the second parameter is an optional options object, we will provide the same options object as in the polyline example.

   
   



   
Creating an instance of fabric.Polygon() and adding it to our canva
   
You can see that the polygon object connects start to end to make a closed area
   
   

 

The above is the detailed content of How are polygons different from polylines in FabricJS?. For more information, please follow other related articles on the PHP Chinese website!