Set Angle of Rotation of a Circle Using Fabric.js

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

361 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

185 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

309 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

180 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

190 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

202 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

335 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

189 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

207 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

233 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