How to set the X-axis tilt angle of a circle using FabricJS?

In this tutorial, we will learn how to set the X-axis tilt angle of a circle using FabricJS. Circles are one of the various shapes provided by FabricJS. To create a circle, we will create an instance of thefabric.Circleclass and add it to the canvas. Our circle object can be customized in many ways, such as changing its dimensions, adding a background color, or by changing the tilt angle on the X-axis. We can do this by using theskewXproperty.

Syntax

new fabric.Circle({ skewX : Number }: Object)

Parameters

• Options (optional)- This parameter is aObject< /em> Provides additional customization for our circles. Using this parameter, you can change properties related to the object for whichskewXis the attribute, such as color, cursor, stroke width, and many other properties.

Option Key

• skewX- This property acceptsnumbers, determine the tilt angle of the object on the X-axis.

Example 1

>When skewX attribute is not applied

Let us see an example to understand when skewX is not applied properties of how our circular object is displayed. In this case, our circular object will not be distorted at any angle.

     
  
Setting the angle of skew on X-axis of circle using FabricJS
 
Here we have not applied the skewX property, hence there is no distortion in the object. 
    

Copy after login

Example 2

Pass skewX as the key and assign it a custom value.

In this example, we will see how to assign the numerical value of theskewXattribute. The value passed will determine the twist along the X-axis. Since we have assigned a value of 30 to theskewXproperty, the effect is as if the circular object was pinched horizontally to create a 30-degree angle.

     
  
Setting the angle of skew on X-axis of circle using FabricJS
 
Observe that the object is skewed on the X-axis in the clockwise direction at an angle of 30 degrees, as we have set skewX at 30. 
    

Copy after login

The above is the detailed content of How to set the X-axis tilt angle of a circle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!