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
How to disable the centered scaling of Circle using FabricJS?
In this tutorial, we are going to learn how to disable the centered scaling 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. When being scaled via controls, assigning a true value to the centeredScaling property, uses the center as the object's origin of transformation.
Syntax
new fabric.Circle({ centeredScaling: Boolean }: Object)Parameters
options (optional) − This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the object of which centeredScaling is a property
Options Keys
centeredScaling − This property accepts a Boolean value. When this property is True, the object uses the center as its origin of transformation.
Example 1
Passing centeredScaling as key and assigning a "true" value to it
Let's see a code to see how a circle object behaves when centeredScaling property is enabled. When we scale the object up, the origin of transformation is the center of the circle.
<!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>Disabling the centered scaling of circle using FabricJs</h2>
<p>Select the object and stretch it by holding one of its controlling corners. You will notice the circle scales up uniformly from its center. This is the default behavior. Here we have not used the <b>centeredScaling</b> property but by default, it is set to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
centeredScaling: true
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Example 2
Disabling centeredScaling property
We can disable the centeredScaling property by assigning it a false value. It will force the circle to not use the center of circle as the center of transformation anymore. Here is a code to demonstrate that
<!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>Disabling the centered scaling of circle using FabricJs</h2>
<p>Select the object and stretch it by holding one of its controlling corners. You will notice that the circle is no longer scaling up uniformly from its center. Here we have used the <b>centeredScaling</b> property and set it False. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 215,
top: 100,
fill: "",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
centeredScaling: false
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
157 Views
To Continue Learning Please Login