如何使用FabricJS退出IText中的编辑状态？

在本教程中，我们将学习如何使用 fabricjs 退出 itext 中的编辑状态。 itext 类是在 fabricjs 版本 1.4 中引入的，它扩展了 fabric.text 并用于创建 itext 实例。 itext 实例使我们可以自由选择、剪切、粘贴或添加新文本，而无需额外配置。还有各种支持的按键组合和鼠标/触摸组合使文本具有交互性，而 text 中未提供这些组合。
然而，基于 itext 的 textbox 允许我们调整文本矩形的大小并自动换行。对于 itext 来说情况并非如此，因为高度不会根据换行进行调整。我们可以通过使用各种属性来操作 itext 对象。同样，我们可以使用exitediting方法退出编辑状态。
语法exitediting(): itext.itext
示例 1仅使用 isediting 属性
让我们看一个代码示例，看看当单独使用 isediting 属性并传递 true 值来打开编辑模式时，itext 对象是什么样子。由于我们没有使用 exitediting() 方法，因此我们的 itext 对象将处于编辑模式。
<!doctype html><html><head>  <script src=https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js></script></head><body> <h2>using the isediting property only</h2> <p>you can see that the editing mode is on</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 itext = new fabric.itext(add sample text here., { width: 300, left: 60, top: 70, fill: red, isediting: true, }); // add it to the canvas canvas.add(itext); </script></body></html>
示例 2将 exitediting 方法与 isediting 属性一起使用
让我们看一个代码示例，看看当 exitediting 方法与 isediting 属性结合使用时，itext 对象是什么样子。由于我们向 isediting 属性传递一个 true 值，因此 itext 对象应该处于编辑模式。但是，一旦我们使用 exitediting 方法，编辑模式就会退出。
<!doctype html><html><head>  <script src=https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js></script></head><body> <h2>using the exitediting method along with the isediting property</h2> <p>you can see that the editing mode is off even though we have passed the isediting property a true value</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 itext = new fabric.itext(add sample text here., { width: 300, left: 60, top: 70, fill: red, isediting: true, }); // add it to the canvas canvas.add(itext); // using the exitediting method itext.exitediting(); </script></body></html>
以上就是如何使用fabricjs退出itext中的编辑状态？的详细内容。

如何使用FabricJS退出IText中的编辑状态？

推荐信息