In this tutorial, we will learn how to set the minimum allowed proportion 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 must create an instance of the fabric.Textbox class and add it to the canvas. Likewise, we can also use the minScaleLimit property to set its minimum allowed scale.
1 |
|
text - This parameter accepts a String which is the text string we want to display in the text box.
Options (optional) - This parameter is an object that provides additional customization to our text box. Using this parameter, you can change properties such as color, cursor, border width, and many other properties associated with the object for which minScaleLimit is a property.
minScaleLimit - This property accepts Number as a value, which allows us to control the minimum scale value allowed for the text box.
Default appearance of text box objects
Let's look at a code example to see what our text box object looks like when not using the minScaleLimit property. In this case we will be able to scale the object freely since no minimum limit is set.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
Pass the minScaleLimit property as a key with a custom value
In this example, we will see how assigning a value to the minScaleLimit property changes the minimum allowed scale value for a textbox object in the canvas. Here we use 0.8 as the value, which means we will not be able to shrink the object to a width smaller than 240 pixels, the width is calculated by width * limit (0.8 *300 = 240 pixels).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
The above is the detailed content of How to set the minimum scale value allowed by Textbox using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!