Home >Web Front-end >JS Tutorial >How to flip textbox vertically using FabricJS?

How to flip textbox vertically using FabricJS?

王林forward: 2023-08-26 20:41:09799browse

如何使用 FabricJS 垂直翻转文本框？

In this tutorial, we will learn how to flip a Textbox object vertically 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. We can flip the text box object vertically using the flipY property.

Syntax

new fabric.Textbox(text: String, { flipY: 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 properties such as color, cursor, stroke width, and many other properties associated with the object for which flipY is the property.

Option Key

flipY - This property accepts a boolean value that allows us to flip the object vertically.

Example 1

Passing FlipY as a key with a value of "false"

Let's look at a code example Shows us the default orientation of textbox objects in FabricJS. Since we passed a "false" value to the flipY property, the text will not flip vertically.

<!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 flipY as key with a "false" value</h2>
   <p>You can see that the text has not flipped vertically</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("Fall seven times, stand up eight.", {
         backgroundColor: "#e3dac9",
         width: 400,
         left: 70,
         top: 70,
         flipY: false,
      });

      // Create gradient fill
         textbox.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 0, y2: 100 },
            colorStops: [
               { offset: 0, color: "#545a2c" },
               { offset: 1, color: "#6495ed" },
            ],
         })
      );
      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

Example 2

Passing the FlipY attribute as a key with a value of "true"

In this example we have a width of 200px The text box object has a vertical linear gradient fill. When we apply the flipY property to the text box object, it flips vertically, so we see the gradient and text flipped as well.

<!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 flipY property as key with a "true" value</h2>
   <p>You can see that the text has flipped vertically</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("Fall seven times, stand up eight.", {
         backgroundColor: "#e3dac9",
         width: 400,
         left: 70,
         top: 70,
         flipY: true,
      });

      // Create gradient fill
         textbox.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 0, y2: 100 },
            colorStops: [
               { offset: 0, color: "#545a2c" },
               { offset: 1, color: "#6495ed" },
            ],
         })
      );
      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

The above is the detailed content of How to flip textbox vertically 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：JavaScript program to find the length of a linked listNext article：JavaScript program to find the length of a linked list

See more