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 Ellipse using FabricJS?
In this tutorial, we are going to learn how to lock the flipping during scaling of an Ellipse using FabricJS. Just as we can specify the position, color, opacity and dimension of an ellipse 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.Ellipse({ lockScalingFlip : 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 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 Behavior of Ellipse Object
Let's take an example to understand the default behavior of an Ellipse object when lockScalingFlip property is not used. By default, objects can flip when scaled beyond their original dimensions.
<!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 Ellipse Scaling Behavior</h2>
<p>Select the object and scale it up. The object will flip. This is the default behavior.</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: 115,
top: 50,
fill: "white",
rx: 80,
ry: 50,
stroke: "black",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Using lockScalingFlip Property
In this example, we will see how we can prevent an ellipse object from flipping while scaling by using the lockScalingFlip property. When set to true, the object maintains its orientation regardless of scaling operations.
<!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>Ellipse with Locked Scaling Flip</h2>
<p>Select the object and stretch it from its corners. The object will not flip because we have set the property <b>lockScalingFlip</b> to true.</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: 115,
top: 50,
fill: "white",
rx: 80,
ry: 50,
stroke: "black",
strokeWidth: 5,
lockScalingFlip: true,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
The lockScalingFlip property prevents objects from flipping when scaled beyond their original dimensions
This property accepts a Boolean value -
trueto lock flipping,falsefor default behaviorUseful for maintaining object orientation during user interactions
Conclusion
The lockScalingFlip property in FabricJS provides control over object flipping during scaling operations. Setting it to true ensures ellipse objects maintain their orientation regardless of scaling, which is useful for creating more predictable user interfaces.
224 Views
