How to disable the centered scaling of Textbox using FabricJS?


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>

Updated on: 29-Jul-2022

212 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements