Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Fabric.js Circle centeredScaling Property
Fabric.js is a powerful JavaScript library that enables you to create and manipulate canvas objects with ease. The centeredScaling property is one of the useful properties in fabric.js, which is very helpful when working with circles. This property allows us to scale the circle from its center point. It is incredibly helpful in certain design scenarios.
What is Centered Scaling?
Centered scaling is a property of Fabric.js objects that allows us to resize an object from its center point instead of a corner. This property maintains the position of the object relative to its center point, which means that it will not shift to the side or top/bottom when we resize it.
Centered scaling is mostly useful for circular objects because it ensures that the circle remains perfectly circular when it is resized. If we want to scale a circle from one of its corners, for example, it would become an ellipse instead of a perfect circle.
Syntax
var circle = new fabric.Circle({
// other circle properties
centeredScaling: true
});
How to Use Centered Scaling with Fabric.js Circles?
We need to set the centeredScaling property to true, to use centered scaling with a Fabric.js circle. Here is an example of how to create a circle and enable centered scaling −
var canvas = new fabric.Canvas('canvas');
var circle = new fabric.Circle({
radius: 40,
fill: 'red',
left: 110,
top: 110,
centeredScaling: true
});
canvas.add(circle);
In the above example, we create a new Fabric.js canvas and then create a new circle object with a radius of 40 and red background color. We also set the left and top properties to position the circle at 110 pixels from the left and top edges of the canvas. Finally, we set the centeredScaling property to true to enable centered scaling for this circle.
With this code, we can now resize the circle by dragging one of its corner handles, and it will scale from its center point rather than from the corner. We will see this in action in the following example −
circle.set({
scaleX: 1.5,
scaleY: 1.5
});
canvas.renderAll();
In the above example, we use the set() method to set the scaleX and scaleY properties to 1.5, which will 50% increase the size of the circle. We then call the renderAll() method to update the canvas and display the resized circle.
Benefits of Using Centered Scaling with Fabric.js Circles −
Perfectly circular scaling − With centered scaling enabled, the circle will always maintain its circular shape when we resize it.
Precise positioning − By scaling from the center point, we ensure that the circle remains perfectly centered on the canvas, which can be helpful for precise design layouts.
Consistent design − By using centered scaling for all of the circular objects, we can ensure a consistent design aesthetic across the canvas.
Example - Fabric.js Circle Centered Scaling
In the above example, firstly we include the Fabric.js library in our HTML head using a CDN link. Then we create a canvas element and initialize a new Fabric.js canvas object with the ID of our canvas element.
<!DOCTYPE html> <html> <head> <title>Fabric.js Circle Centered Scaling Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script> </head> <body> <h1>Fabric.js Circle Centered Scaling</h1> <canvas id="canvas" width="500" height="500"></canvas> </body> </html>
Next, we create a new circle object using the fabric.circle constructor, with a radius of 40, red background color, and centered scaling enabled. We set the left and top properties to position the circle 110 pixels from the left and top edges of the canvas.
<script>
var canvas = new fabric.Canvas('canvas');
var circle = new fabric.Circle({
radius: 40,
fill: 'red',
left: 110,
top: 110,
centeredScaling: true
});
</script>
We add the circle to the canvas using the canvas.add() method, and then use the circle.set() method to scale the circle to 50% its original size by setting the scaleX and scaleY properties to 1.5.
<script>
canvas.add(circle);
circle.set({
scaleX: 1.5,
scaleY: 1.5
});
</script>
Finally, we call the canvas.renderAll() method to render the canvas and display the resized circle.
<script> canvas.renderAll(); </script>
Example
<!DOCTYPE html>
<html>
<head>
<title>Fabric.js Circle Centered Scaling Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
</head>
<body>
<h2>Fabric.js Circle Centered Scaling</h2>
<p>Select the circle to see that the controlling corners.</p>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
// Initialize the canvas
var canvas = new fabric.Canvas('canvas');
// Create a new circle with centered scaling enabled
var circle = new fabric.Circle({
radius: 40,
fill: 'red',
left: 110,
top: 20,
centeredScaling: true
});
// Add the circle to the canvas
canvas.add(circle);
// Scale the circle to twice its original size
circle.set({
scaleX: 1.5,
scaleY: 1.5
});
// Render the canvas
canvas.renderAll();
</script>
</body>
</html>
Conclusion
Centered scaling is a powerful property of Fabric.js that enhance the ability to design and manipulate circular objects on a canvas. By enabling centered scaling for the circles, we can ensure that they maintain its circular shape and precise positioning when we resize them.
113 Views
