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 set the minimum allowed scale value of an Ellipse using FabricJS?
In this tutorial, we are going to learn how to set the minimum allowed scale of Ellipse using FabricJS. Ellipse is one of the various shapes provided by FabricJS. In order to create an ellipse, we will create an instance of fabric.Ellipse class and add it to the canvas. We can customize an ellipse object by adding a fill color to it, eliminate its borders or even make changes in its dimensions. Similarly, we can also set its minimum allowed scale by using the minScaleLimit property.
Syntax
new fabric.Ellipse({ minScaleLimit : Number }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our ellipse. Using this parameter color, cursor, border width and a lot of other properties can be changed related to the object of which minScaleLimit is a property.
Options Keys
-
minScaleLimit ? This property accepts a Number as a value that allows us to control the minimum allowed scale of an ellipse. The value represents a scale factor where 1.0 is the original size, 0.5 is half size, and 2.0 is double size.
Example 1: Default Behavior Without minScaleLimit
Let's take an example to see how our ellipse object looks like when the minScaleLimit property is not used. In this case, we will be able to freely scale our object since there is no minimum limit set.
<!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 without minScaleLimit</h2>
<p>You can select the object and scale it freely in any direction.</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,
rx: 80,
ry: 50,
fill: "#ff1493",
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Using minScaleLimit Property
In this example, we will see how assigning a value to the minScaleLimit property changes the minimum allowed scale value of the ellipse object in our canvas. Here we have used 0.8 as the value which means we will not be able to scale down our object lesser than 80% of its original size.
<!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 minScaleLimit</h2>
<p>Try to scale this ellipse down. It cannot be reduced below 80% of its original size.</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,
rx: 80,
ry: 50,
fill: "#ff1493",
minScaleLimit: 0.8,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
How It Works
The minScaleLimit property works by preventing the user from scaling the object below the specified threshold. When a value of 0.8 is set, the ellipse maintains at least 80% of its original dimensions. This means:
- Original horizontal radius (rx): 80px ? Minimum allowed: 64px (80 × 0.8)
- Original vertical radius (ry): 50px ? Minimum allowed: 40px (50 × 0.8)
Common Use Cases
- UI Design: Preventing icons or buttons from becoming too small to interact with
- Image Editing: Maintaining readability of text or important visual elements
- Game Development: Ensuring game objects remain visible and functional
Conclusion
The minScaleLimit property in FabricJS provides essential control over ellipse scaling behavior. By setting this property, you can ensure that ellipse objects maintain a minimum size, preventing them from becoming too small for their intended purpose.
196 Views
