How to lock the vertical tilt of a circle using FabricJS?

In this tutorial, we will learn how to lock the vertical tilt of a circle using FabricJS. Just as we can specify the position, color, opacity, and size of a circular object in the canvas, we can also specify whether we want to stop tilting the object vertically. This can be done using the lockSkewingY property.

Syntax

new fabric.Circle({ lockSkewingY : Boolean }: Object)

Parameters

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

Option Key

• ##lockSkewingY - This property accepts a Boolean value value. If we give it a "true" value, the object's vertical tilt will be locked. < /strong>

Example 1

#Default behavior of a Circle object in canvas

Let's look at a code example to understand The default behavior of Circle objects when the lockSkewingY property is not used. You can tilt an object horizontally and vertically by pressing the

shift key and then dragging horizontally or vertically.

   
      
      
   


   
      
Locking the vertical skewing of a circle using FabricJS
      
Select the object, hold the shift key, and stretch it horizontally or vertically. The object will get skewed freely. This is the default behavior. Here we have not applied the lockSkewingY property, but by default, it is set to False. 
      

      
   

Copy after login
Example 2

Pass lockSkewingY as key with "true" value

In this example we will see how to stop the circle The ability to vertically tilt an object using the lockSkewingY property. As we can see, while we can tilt a circular object horizontally by pressing the

Shift key, we are not allowed to do the same vertically.

   
      
      
   


   
      
Locking the vertical skewing of a circle using FabricJS
      
Select the object, hold the shift key, and try to stretch the circle horizontally or vertically. You will notice that the object gets skewed horizontally, but its vertical skewing is locked. Here we have set lockSkewingY to True. 
      

      
   

Copy after login

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