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 Circle using FabricJS?
In this tutorial, we are going to learn how to set the minimum allowed scale of Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will have to create an instance of fabric.Circle class and add it to the canvas. We can customize a circle 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.Circle({ minScaleLimit : Number }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our circle. 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 that allows us to control the minimum allowed scale of a circle. The value represents a percentage where 1.0 is 100% of the original size, 0.5 is 50%, etc.
Example 1: Default Circle Without Scale Limit
Let's see a code to see how our circle object looks like when the minScaleLimit property is not used. In this case, we will be able to scale an object freely 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>Setting the minimum allowed scale value of circle using FabricJS</h2>
<p>Select the object and scale it down by dragging one of its controlling corners. Here you can scale down the object freely since there is no minimum limit set.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#ff1493"
});
// Adding it to the canvas
canvas.add(circle);
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 circle 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.
<!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>Setting the minimum allowed scale value of circle using FabricJS</h2>
<p>Select the object and try to scale it down by dragging one of its controlling corners. You cannot scale down the object freely, as we have set <b>minScaleLimit</b> at 0.8. So, the minimum scale of the circle must be at least 80% of the original size, beyond which you cannot scale it down any further.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 80,
fill: "#ff1493",
minScaleLimit: 0.8
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
How It Works
The minScaleLimit property works by preventing users from scaling the circle object below a specified threshold. When a user attempts to scale the object smaller than this limit, FabricJS will restrict the scaling operation, ensuring the object maintains a minimum size.
Common Use Cases
- Preventing important UI elements from becoming too small to interact with
- Maintaining readability of text or icons within shapes
- Preserving the visual hierarchy in design applications
- Ensuring consistent minimum sizes across different objects
Conclusion
The minScaleLimit property in FabricJS provides essential control over circle scaling behavior. By setting this property, you can prevent users from making circles too small while still allowing reasonable resizing flexibility.
251 Views
