Set Angle of Rotation of a Circle Using Fabric.js

Rahul Gurung
Updated on 25-May-2022 12:19:10

378 Views

In this tutorial, we are going to set the angle of rotation of a Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we have to create an instance of fabric.Circle class and add it to the canvas. The angle property in FabricJS defines the angle of 2D rotation of an object. We also have the centeredRotation property that allows us to use the center point of a circle as the origin of transformation.Syntaxnew fabric.Circle({ angle: Number, centeredRotation: Boolean }: Object)Parametersoptions (optional) − This parameter is an Object which provides ... Read More

Make Controlling Corners of a Circle Transparent Using Fabric.js

Rahul Gurung
Updated on 25-May-2022 12:15:02

192 Views

In this tutorial, we are going to learn how to make the controlling corners of Circle transparent using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will create an instance of fabric.Circle class and add it to the canvas. The transparentCorners property allows us to make the controlling corners of Circle transparent.Syntaxnew fabric.Circle( { transparentCorners: Boolean }: Object)Parametersoptions (optional) − This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be ... Read More

Make a Circle Invisible Using Fabric.js

Rahul Gurung
Updated on 25-May-2022 12:09:09

321 Views

In this tutorial, we are going to learn how to make a Circle invisible using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we have to create an instance of fabric.Circle class and add it to the canvas. Our circle object can be customized in various ways like changing its dimensions, adding a background color or by making it visible or invisible. We can do this by using the visible property.Syntaxnew fabric.Circle( { visible: Boolean }: Object)Parametersoptions (optional) − This parameter is an Object which provides additional customizations to our circle. ... Read More

Lock Vertical Skewing of a Circle Using FabricJS

Rahul Gurung
Updated on 25-May-2022 12:04:22

188 Views

In this tutorial, we are going to learn how to lock the vertical skewing of a Circle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a circle object in the canvas, we can also specify whether we want to stop skewing an object vertically. This can be done by using the lockSkewingY property.Syntaxnew fabric.Circle({ lockSkewingY : Boolean }: Object)Parametersoptions (optional) − This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to ... Read More

Lock Vertical Scaling of a Circle Using Fabric.js

Rahul Gurung
Updated on 25-May-2022 11:59:48

208 Views

In this tutorial, we are going to learn how to lock the vertical scaling of a Circle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a circle object in the canvas, we can also specify whether we want to stop scaling an object vertically. This can be done by using the lockScalingY property.Syntaxnew fabric.Circle({ lockScalingY : Boolean }: Object)Parametersoptions (optional) − This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to ... Read More

Lock Vertical Movement of a Circle Using Fabric.js

Rahul Gurung
Updated on 25-May-2022 11:55:20

219 Views

In this tutorial, we are going to learn how to lock the vertical movement of a Circle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a circle object in the canvas, we can also specify whether we want it to move only in the X-axis. This can be done by using the lockMovementY property.Syntaxnew fabric.Circle({ lockMovementY: Boolean }: Object)Parametersoptions (optional) − This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to ... Read More

Lock the Rotation of a Circle Using Fabric.js

Rahul Gurung
Updated on 25-May-2022 11:50:58

345 Views

In this tutorial, we are going to learn how to lock the rotation of a Circle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a circle object in the canvas, we can also specify whether we want it to rotate or not. This can be done by using the lockRotation property.Syntaxnew fabric.Circle({ lockRotation : Boolean }: Object)Parametersoptions (optional) − This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the object ... Read More

Lock Horizontal Skewing of Circle Using Fabric.js

Rahul Gurung
Updated on 25-May-2022 11:46:40

202 Views

In this tutorial, we are going to learn how to lock the horizontal skewing of a Circle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a circle object in the canvas, we can also specify whether we want to stop skewing an object horizontally. This can be done by using the lockSkewingX property.Syntaxnew fabric.Circle({ lockSkewingX : Boolean }: Object)Parametersoptions (optional) − This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to ... Read More

Lock Horizontal Scaling of a Circle Using Fabric.js

Rahul Gurung
Updated on 25-May-2022 11:42:32

221 Views

In this tutorial, we are going to learn how to lock the horizontal scaling of a Circle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a circle object in the canvas, we can also specify whether we want to stop scaling an object horizontally. This can be done by using the lockScalingX property.Syntaxnew fabric.Circle({ lockScalingX : Boolean }: Object)Parametersoptions (optional) − This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to ... Read More

Lock Horizontal Movement of a Circle using Fabric.js

Rahul Gurung
Updated on 25-May-2022 11:38:49

240 Views

In this tutorial, we are going to learn how to lock the horizontal movement of a Circle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a circle object in the canvas, we can also specify whether we want it to move only in the Y-axis. This can be done by using the lockMovementX property.Syntaxnew fabric.Circle({ lockMovementX: Boolean }: Object)Parametersoptions (optional) − This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to ... Read More

Advertisements