search

Home  >  Article  >  Web Front-end  >  How to move an object to the top of the draw object stack in IText using FabricJS?

How to move an object to the top of the draw object stack in IText using FabricJS?

PHPz
PHPzforward
2023-09-05 10:57:06800browse

如何使用 FabricJS 将对象移动到 IText 中绘制对象堆栈的顶部？

In this tutorial, we will learn how to move an object to the top of the draw object stack in IText using FabricJS. The IText class was introduced in FabricJS version 1.4, which extends Fabric.Text and is used to create IText instances. IText instances give us the freedom to select, cut, paste or add new text without additional configuration. There are also various supported key combinations and mouse/touch combinations to make text interactive that are not available in Text.

However, IText-based Textbox allows us to resize the text rectangle and wrap it automatically. This is not the case for IText, as the height does not adjust based on line breaks. We can manipulate IText objects by using various properties. Likewise, we can use the BringToFront method to move an object to the top of the draw object stack.

grammar

bringToFront(): fabric.Object

Example 1

Do not use the bringToFront method

Let's look at a code example to see how an IText object behaves without using the BringToFront method. In this example, we initialize two IText objects, itext1 and itext2. You can notice that the second text covers the first text, hiding it behind. 

<!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>Without using the bringToFront method</h2>
   <p> You can see that the first itext object is hidden behind the second itext object </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 an itext object
      var itext1 = new fabric.IText("First itext object.", {
         width: 300,
         left: 110,
         top: 70,
         fill: "#b666d2",
         fontStyle: "bold",
         backgroundColor: "#f8f4ff",
      });

      // Initiate another itext object
      var itext2 = new fabric.IText("Second itext object.", {
         width: 300,
         left: 130,
         top: 90,
         fill: "white",
         backgroundColor: "#c8a2c8",
      });

      // Add it to the canvas
      canvas.add(itext1);
      canvas.add(itext2);
   </script>
</body>
</html>

Example 2

Use the bringToFront method

Let's look at a code example to see how an IText object behaves when using the BringToFront method. In this case, our itext1 object will now be at the top of the stack, so it will no longer be hidden behind itext2. 

<!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>Using the bringToFront method</h2>
   <p> You can see that the first itext object is no longer hidden behind the second itext object </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 an itext object
      var itext1 = new fabric.IText("First itext object.", {
         width: 300,
         left: 110,
         top: 70,
         fill: "#b666d2",
         fontStyle: "bold",
         backgroundColor: "#f8f4ff",
      });

      // Initiate another itext object
      var itext2 = new fabric.IText("Second itext object.", {
         width: 300,
         left: 130,
         top: 90,
         fill: "white",
         backgroundColor: "#c8a2c8",
      });
      
      // Add it to the canvas
      canvas.add(itext1);
      canvas.add(itext2);

      // Using the bringToFront method
      itext1.bringToFront();
   </script>
</body>
</html>

The above is the detailed content of How to move an object to the top of the draw object stack in IText using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

栈 堆 对象 fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to use nested for loops in JavaScript?Next article：How to use nested for loops in JavaScript?

Related articles

See more