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 lock the flipping during scaling of Rectangle using FabricJS?
In this tutorial, we are going to learn how to lock the flipping during scaling of a Rectangle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a rectangle object in the canvas, we can also specify whether we want to stop flipping an object during scaling. This can be done by using the lockScalingFlip property.
Syntax
new fabric.Rect({ lockScalingFlip : Boolean }: Object)
Parameters
Options (optional) ? This parameter is an Object which provides additional customizations to our rectangle. 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 lockScalingFlip is a property.
Options Keys
lockScalingFlip ? This property accepts a Boolean value. If we assign it a 'true' value, then the object will not be allowed to flip during scaling.
Example 1: Default behaviour of a Rectangle object
Let's see a code example to understand the default behaviour of a rectangle object when lockScalingFlip property is not used.
<!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 behaviour of a Rectangle object in the canvas</h2>
<p>Select a corner and drag the rectangle diagonally to scale it down and then flip it with further dragging.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 155,
top: 90,
width: 170,
height: 70,
fill: "white",
padding: 9,
stroke: "#483d8b",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Example 2: Passing lockScalingFlip as key with 'true' value
In this example, we will see how we can cease the ability of a rectangle object to flip while scaling by using the lockScalingFlip property. As we can see, although we try to flip the rectangle object, it is no longer allowed.
<!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>Passing lockScalingFlip as key with a True value</h2>
<p>You will no longer be able to flip the rectangle while scaling it.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 155,
top: 90,
width: 170,
height: 70,
fill: "white",
padding: 9,
stroke: "#483d8b",
strokeWidth: 5,
lockScalingFlip: true,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Key Points
By default, FabricJS allows objects to flip when scaled beyond their minimum size
Setting
lockScalingFlip: trueprevents this flipping behaviorThis property is particularly useful when you want to maintain object orientation during scaling operations
The property works with all scaling interactions, whether using corner handles or programmatic scaling
Conclusion
The lockScalingFlip property in FabricJS provides control over object flipping during scaling operations. Setting it to true ensures that rectangles maintain their orientation regardless of how they are scaled, which is essential for maintaining consistent UI behavior in canvas applications.
417 Views
