How to disable centered scaling of Textbox using FabricJS?

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 thecenteredScalingproperty, using the center as the object's transformation origin.

Syntax

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

Parameters

• text− This parameter accepts aString, which is our The text string to use. Want to display in our text box.

• Options(optional) - This parameter is anobjectthat 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 thecenteredScalingproperty.

< /ul>

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

PasscenteredScalingas the key and assign it the "true" value

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

     
  
Passing centeredScaling as key and assigning a "true" value to it
 
Try scaling the textbox to see that centered scaling has been enabled
    

Copy after login

Example 2

Disable the centeredScaling property

We can disable thecenteredScalingproperty 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 -

     
  
Disabling centeredScaling property
 
Try scaling the textbox to see that centered scaling has been disabled
    

Copy after login

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!