在本教程中，我们将学习如何使用 FabricJS 将对象移动到 IText 中绘制对象堆栈的顶部。 IText 类是在 FabricJS 版本 1.4 中引入的，它扩展了 Fabric.Text 并用于创建 IText 实例。 IText 实例使我们可以自由选择、剪切、粘贴或添加新文本，而无需额外配置。还有各种支持的按键组合和鼠标/触摸组合使文本具有交互性，而 Text 中未提供这些组合。
然而，基于 IText 的 Textbox 允许我们调整文本矩形的大小并自动换行。对于 IText 来说情况并非如此，因为高度不会根据换行进行调整。我们可以通过使用各种属性来操作 IText 对象。同样，我们可以使用 BringToFront 方法将对象移动到绘制对象堆栈的顶部。
语法
- bringToFront(): fabric.Object
登录后复制
示例 1
不使用bringToFront方法
让我们看一个代码示例，看看不使用 BringToFront 方法时 IText 对象的行为。在本例中，我们初始化了两个 IText 对象，即 itext1 和 itext2。您可以注意到第二个文本覆盖了第一个文本，将其隐藏在后面。
Without using the bringToFront method
You can see that the first itext object is hidden behind the second itext object
// 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);
登录后复制
示例 2
使用bringToFront方法
让我们看一个代码示例，看看使用 BringToFront 方法时 IText 对象的行为。在这种情况下，我们的 itext1 对象现在将位于堆栈的顶部，因此它将不再隐藏在 itext2 后面。
Using the bringToFront method
You can see that the first itext object is no longer hidden behind the second itext object
// 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();
登录后复制
以上就是如何使用 FabricJS 将对象移动到 IText 中绘制对象堆栈的顶部？的详细内容，更多请关注【创想鸟】其它相关文章！
