Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to disable the centered rotation of Ellipse using FabricJS?
In this tutorial, we are going to learn how to disable the centered rotation of Ellipse using FabricJS. Ellipse is one of the various shapes provided by FabricJS. In order to create an ellipse, we will have to create an instance of fabric.Ellipse class and add it to the canvas. By default, all objects in FabricJS use their center as the point of rotation. However, we can change this behaviour by using the centeredRotation property.
Syntax
new fabric.Ellipse({ centeredRotation: Boolean }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our ellipse. Using this parameter color, cursor, stroke width and a lot of other properties can be changed related to the object of which centeredRotation is a property.
Options Keys
-
centeredRotation ? This property accepts a Boolean value that allows us to control whether an object uses its center point as origin of transformation when rotated via controls. Its default value is True.
Example 1: Default Centered Rotation Behavior
Let's see an example that depicts the default behaviour of an ellipse object. Since centeredRotation property is set to "true" by default, the ellipse object uses its center as the point of rotation.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Default Centered Rotation of Ellipse</h2>
<p>Select the object and rotate it. The ellipse will rotate around its center.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 215,
top: 100,
fill: "white",
rx: 90,
ry: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Disabling Centered Rotation
Now that we've seen the default behaviour, let us see a code to understand what happens when the centeredRotation property is assigned a "false" value. Here the ellipse no longer uses the center of the ellipse as the origin of rotation but uses one of the edges instead.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Disabling Centered Rotation of Ellipse</h2>
<p>Select the object and try to rotate it. The ellipse will not rotate around its center because we have set <b>centeredRotation</b> to False.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 215,
top: 100,
fill: "white",
rx: 90,
ry: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
centeredRotation: false,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
- The
centeredRotationproperty is true by default for all FabricJS objects - When set to false, the rotation origin shifts from the center to one of the object's edges
- This property affects only manual rotation via controls, not programmatic rotation
- The property is useful when you want objects to rotate around a specific anchor point rather than their geometric center
Conclusion
The centeredRotation property in FabricJS provides control over the rotation behavior of ellipse objects. By setting it to false, you can disable centered rotation and allow objects to rotate around their edges instead.
239 Views
