Home > Article > Web Front-end > How to move an object to the top of the draw object stack in IText using FabricJS?
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.
bringToFront(): fabric.Object
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>
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!