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 a Triangle using FabricJS?
In this tutorial, we are going to learn how to disable the centered scaling of Triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of fabric.Triangle class and add it to the canvas.
When an object is scaled via controls, assigning a True value to the centeredScaling property makes the origin of transformation its center. By setting it to False, the scaling occurs from the corner being dragged.
Syntax
new fabric.Triangle({ centeredScaling: Boolean }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our triangle. 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 and allows us to control whether the object should use its center as its origin of transformation or not. Default value is
true.
Example 1: Centered Scaling Enabled (Default)
Let's see a code example to see how a triangle object behaves when centeredScaling property is enabled. When we scale the object up, the origin of transformation is the center of the triangle.
<!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 Enabled</h2>
<p>Try scaling the triangle to see that it is using its center as the center of transformation.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(400);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 60,
width: 100,
height: 70,
fill: "#5f9ea0",
centeredScaling: true,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Disabling Centered Scaling
We can disable the centeredScaling property by assigning it a False value. This will not use the center of the triangle as the center of transformation anymore. Instead, scaling will occur from the corner being dragged.
<!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 Disabled</h2>
<p>Try scaling the triangle to see that it is using one of its corners as the center of transformation.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(400);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 60,
width: 100,
height: 70,
fill: "#5f9ea0",
centeredScaling: false,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Key Differences
| Property Value | Scaling Behavior | Transform Origin |
|---|---|---|
centeredScaling: true |
Scales from center | Center of the triangle |
centeredScaling: false |
Scales from corner | Corner being dragged |
Conclusion
The centeredScaling property controls how FabricJS triangles scale when manipulated. Setting it to false provides more natural scaling behavior where objects grow from the corner being dragged rather than the center.
190 Views
