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 a Triangle using FabricJS?
In this tutorial, we are going to learn how to set the minimum allowed scale 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.
We can customize a triangle object by adding a fill colour 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.Triangle({ minScaleLimit : Number }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our triangle. Using this parameter colour, 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 which allows us to control the minimum allowed scale value of a triangle. The value represents a multiplier where 1.0 is the original size, 0.5 is half size, etc.
Example 1: Default Triangle Without Scale Limit
Let's see a code example to see how our triangle 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 appearance of the Triangle object</h2>
<p>You can scale the triangle object to see that there is no minimum limit set</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 70,
width: 90,
height: 80,
fill: "#746cc0",
stroke: "#967bb6",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Triangle With Minimum Scale Limit
In this example, we will see how assigning a value to the minScaleLimit property changes the minimum allowed scale value of the triangle object in our canvas. Here we have used 0.8 as value which means we will not be able to scale down our object smaller than 80% of its original size (0.8 * 90 = 72px width, 0.8 * 80 = 64px height).
<!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 the minScaleLimit property as key with a custom value</h2>
<p>You can scale the triangle object to see that there is a minimum limit set</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 70,
width: 90,
height: 80,
fill: "#746cc0",
stroke: "#967bb6",
strokeWidth: 5,
minScaleLimit: 0.8,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
How It Works
The minScaleLimit property works by preventing the user from scaling the triangle below the specified threshold during interactive scaling operations. When a user tries to scale the triangle smaller than the limit, FabricJS automatically stops the scaling at the minimum allowed size.
Key Points
The minScaleLimit value is a decimal number where 1.0 represents the original size
Values less than 1.0 allow scaling down (e.g., 0.5 = 50% of original size)
Values greater than 1.0 prevent scaling below the original size
This property only affects interactive scaling, not programmatic scaling
Conclusion
The minScaleLimit property in FabricJS provides an effective way to control the minimum size constraints of triangle objects. This feature is particularly useful for maintaining design consistency and preventing objects from becoming too small to be useful in your canvas applications.
186 Views
