Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Disable Centered Scaling of Textbox using Fabric.js
In this tutorial, we are going to learn how to disable the centered scaling of Textbox using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox 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.Textbox(text: String, { centeredScaling: Boolean }: Object)
Parameters
text This parameter accepts a String which is the text string that we want to display inside our textbox.
options (optional) This parameter is an Object which provides additional customizations to our textbox. 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 and allows us to control whether the object should use its center as its origin of transformation or not.
Example 1
Passing centeredScaling as key and assigning a "true" value to it
Let’s see a code example to see how a textbox object behaves when centeredScaling property is enabled. When we scale the object up the origin of transformation is the center of the textbox.
<!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 centeredScaling as key and assigning a "true" value to it</h2>
<p>Try scaling the textbox to see that centered scaling has been enabled</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 textbox object
var textbox = new fabric.Textbox("Success is the child of audacity.", {
backgroundColor: "#ffe5b4",
width: 400,
top: 70,
left: 110,
centeredScaling: true,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Example 2
Disabling centeredScaling property
We can disable the centeredScaling property by assigning it a "false" value. This will not use the center of the textbox as the center of transformation anymore. Here is a code example 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 centeredScaling property</h2>
<p>Try scaling the textbox to see that centered scaling has been disabled</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 textbox object
var textbox = new fabric.Textbox("Success is the child of audacity.", {
backgroundColor: "#ffe5b4",
width: 400,
top: 70,
left: 110,
centeredScaling: false,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
346 Views
