Home > Article > Web Front-end > How to disable centered scaling of Textbox using FabricJS?

How to disable centered scaling of Textbox using FabricJS?

PHPzforward: 2023-08-23 18:01:021212browse

如何使用 FabricJS 禁用 Textbox 的居中缩放？

In this tutorial, we will learn how to disable centered scaling of a Textbox using FabricJS. We can customize, stretch or move the text written in the text box. In order to create a textbox, we have to create an instance of the Fabric.Textbox class and add it to the canvas. When scaling through a control, assign a true value to the centeredScaling property, using the center as the object's transformation origin.

Syntax

new fabric.Textbox(text: String, { centeredScaling: Boolean }: Object)

Parameters

text − This parameter accepts a String, which is our The text string to use. Want to display in our text box.
Options (optional) - This parameter is an object that provides additional customization of our text box. Using this parameter, you can change the color, cursor, stroke width and other properties of the object related to the centeredScaling property.

Options Keys

centeredScaling - This property accepts a boolean value and allows us to control whether the object should use its center or not as the origin of transformation.

Example 1

Pass centeredScaling as the key and assign it the "true" value

Let's look at a code example to understand how a textbox object behaves when the centeredScaling property is enabled. When we zoom in on an object, the origin of the transformation is the center of the text box.

<!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

Disable the centeredScaling property

We can disable the centeredScaling property by specifying a "false" value for it . This will no longer use the center of the text box as the center of the transform. Here is a code sample to demonstrate -

<!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>

The above is the detailed content of How to disable centered scaling of Textbox using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to set the height of a triangle using FabricJS?Next article：How to set the height of a triangle using FabricJS?

See more