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 scaling of Circle using FabricJS?
In this tutorial, we are going to learn how to disable the centered scaling of Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will have to create an instance of fabric.Circle class and add it to the canvas. When being scaled via controls, assigning a true value to the centeredScaling property, uses the center as the object's origin of transformation.
Syntax
new fabric.Circle({ centeredScaling: Boolean }: Object)
Parameters
-
options (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 of which centeredScaling is a property
Options Keys
-
centeredScaling ? This property accepts a Boolean value. When this property is True, the object uses the center as its origin of transformation.
Example 1: Default Centered Scaling Behavior
Passing centeredScaling as key and assigning a "true" value to it
Let's see a code to see how a circle object behaves when centeredScaling property is enabled. When we scale the object up, the origin of transformation is the center of the circle.
<!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>Centered Scaling of circle using FabricJs</h2>
<p>Select the object and stretch it by holding one of its controlling corners. You will notice the circle scales up uniformly from its center. This is the default behavior. Here we have set the <b>centeredScaling</b> property to True.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
centeredScaling: true
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Disabling Centered Scaling
Disabling centeredScaling property
We can disable the centeredScaling property by assigning it a false value. It will force the circle to not use the center of circle as the center of transformation anymore. Here is a code to demonstrate that:
<!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 the centered scaling of circle using FabricJs</h2>
<p>Select the object and stretch it by holding one of its controlling corners. You will notice that the circle is no longer scaling up uniformly from its center. Here we have used the <b>centeredScaling</b> property and set it False.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 215,
top: 100,
fill: "lightblue",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
centeredScaling: false
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Differences
| Property Value | Scaling Behavior | Origin of Transformation |
|---|---|---|
centeredScaling: true |
Scales uniformly from center | Center of the object |
centeredScaling: false |
Scales from the opposite corner | Corner opposite to the one being dragged |
Conclusion
The centeredScaling property in FabricJS controls how objects transform when scaled. Setting it to false allows for corner-based scaling, which is useful for more precise positioning and resizing control.
304 Views
