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 Text using FabricJS?
In this tutorial, we are going to learn how to disable the centered scaling of Text using FabricJS. We can display text on canvas by adding an instance of fabric.Text. Not only does it allow us to move, scale and change the dimensions of the text but it also provides additional functionality like text alignment, text decoration, line height which can be obtained by the properties textAlign, underline and lineHeight respectively. 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.Text(text: String, { centeredScaling: Boolean }: Object)
Parameters
text − This parameter accepts a String which is the text string that we want to display.
options (optional) − This parameter is an Object which provides additional customizations to our text. Using this parameter 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 text object behaves when centeredScaling property is enabled. When we scale the object up the origin of transformation is the center of the text.
<!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 text 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 text object var text = new fabric.Text("Add Sample Text Here", { width: 200, top: 70, left: 50, centeredScaling: true, }); // Add it to the canvas canvas.add(text); </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 text object 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 text 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 text object var text = new fabric.Text("Add Sample Text Here", { width: 200, top: 70, left: 50, centeredScaling: false, }); // Add it to the canvas canvas.add(text); </script> </body> </html>
242 Views
