search

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

How to flip textbox horizontally using FabricJS?

WBOY
WBOYforward
2023-09-16 13:17:021294browse

如何使用 FabricJS 水平翻转文本框？

In this tutorial, we will learn how to flip a Textbox object horizontally 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 horizontally using the FlipX property.

Syntax

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

Parameters

  • text - This parameter accepts a string, which is We are going to use the text string we 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 object-related properties such as color, cursor, stroke width, and many other properties. flipX is a property of the object.

    • ul>

    Option Key

    • ##flipX - This property accepts a Boolean value, allows us to flip the object horizontally.

    Example 1

    Passing FlipX as key with "false" value

    Let's look at a code example , which shows us the default orientation of textbox objects in FabricJS. Since we passed a False value to the

    flipX property, the text will not flip horizontally. 

    <!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 flipX as key with a "false" value</h2>
   <p>You can see that the text has not flipped horizontally</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("Each day provides its own gifts.", {
         backgroundColor: "#e3dac9",
         width: 400,
         left: 70,
         top: 70,
         flipX: false,
      });

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

    Example 2

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

    In this example we have a width of 200px The text box object has a horizontal linear gradient fill. When we apply the flipX property to the text box object, the text flips horizontally, so we see the gradient and the text flip 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 flipX property as key with a &lsquo;true&rsquo; value</h2>
   <p>You can see that the text has flipped horizontally</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("Each day provides its own gifts.", {
         backgroundColor: "#e3dac9",
         width: 400,
         left: 70,
         top: 70,
         flipX: true,
      });

      // Create gradient fill
         textbox.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
            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 horizontally using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

字符串 对象 ul fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：FabricJS - How to remove shadow of current object in cloned image?Next article：FabricJS - How to remove shadow of current object in cloned image?

Related articles

See more