Add patterns with images and colors to polygons using FabricJS

We can create a polygon object by creating an instance offabric.Polygon. A polygonal object can be described by 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 like angle, opacity, etc. In order to add patterns and colors to polygons, we can use thePatternclass in FabricJS.

Grammar

new fabric.Pattern( options: Object, callback: function )

parameter

• options(optional)− This parameter is anObjectwhich provides additional customizations to our object. Using this parameter offsetX, cross-origin and a lot of other properties can be changed related to the Pattern.

• callback− This parameter is afunctioncalled after the callback is initialized. This parameter is optional.

Example 1: Create an instance of fabric.Pattern() and add it to our polygon object

Let's look at a code example to see how to create an instance offabric.Patternand add it to the canvas. Here, we create a polygon object whose shape is a rectangle (an irregular polygon). We initialize thecreatePatternfunction which will add the pattern to our rectangle. Finally, we call thecreatePatternfunction and pass it the required URL.

     
  
 Creating an instance of fabric.Pattern() and adding it to our Polygon object 
 
You can see that a pattern has been created
    

Example 2: Adding a pattern of images and colors to our polygons

Let's look at a code example to see how to create a dynamic pattern with an image and color for our polygon object. In this case, we used thefromURLmethod to load the image and initialized afabric.StaticCanvas()object, which is one of the main rendering surfaces of FabricJS and is useful for creating Dynamic patterns are crucial.

We used thesetBackgroundColormethod to set the background color for the polygon. Finally, we add the polygon object to the canvas.

     
  
Adding a pattern with Image and Colour to our Polygon
 
You can see that a pattern with image and colour has been created and further use the number field to change the pattern density
 Add a width value(50-500):      

in conclusion

In this tutorial, we use two simple examples to demonstrate how to use FabricJS to add images and patterns of color to polygons.

The above is the detailed content of Add patterns with images and colors to polygons using FabricJS. For more information, please follow other related articles on the PHP Chinese website!