Home > Web Front-end > JS Tutorial > How to set the minimum scale value allowed by Textbox using FabricJS?

How to set the minimum scale value allowed by Textbox using FabricJS?

WBOY
Release: 2023-08-24 13:09:03
forward
1141 people have browsed it

How to set the minimum scale value allowed by Textbox using FabricJS?

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.

grammar

1

new fabric.Textbox(text: String, { minScaleLimit : Number }: Object)

Copy after login

parameter

  • 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.

Option key

  • minScaleLimit - This property accepts Number as a value, which allows us to control the minimum scale value allowed for the text box.

Example 1

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

<!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>Default appearance of the Textbox object</h2>

    <p>You can scale the textbox object to see that there is no minimum limit set</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("That which does not kill us makes us stronger.", {

            backgroundColor: "#e5e4e2",

            width: 400,

            left: 50,

            top: 70,

            fill: "#e1a95f",

        });

         

        // Add it to the canvas

        canvas.add(textbox);

    </script>

</body>

</html>

Copy after login

Example 2

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

<!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 the minScaleLimit property as key with a custom value</h2>

    <p>   You can scale the textbox object to see that there is a minimum limit set</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("That which does not kill us makes us stronger.", {

            backgroundColor: "#e5e4e2",

            width: 400,

            left: 50,

            top: 70,

            fill: "#e1a95f",

            minScaleLimit: 0.8,

        });

         

        // Add it to the canvas

        canvas.add(textbox);

    </script>

</body>

</html>

Copy after login

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!

source:tutorialspoint.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template