在本教程中，我们将学习如何使用 FabricJS 获取 IText 中单词的正确边界。 IText 类是在 FabricJS 版本 1.4 中引入的，它扩展了 Fabric.Text 并用于创建 IText 实例。 IText 实例使我们可以自由选择、剪切、粘贴或添加新文本，而无需额外配置。还有各种支持的按键组合和鼠标/触摸组合使文本具有交互性，而 Text 中未提供这些组合。
然而，基于 IText 的 Textbox 允许我们调整文本矩形的大小并自动换行。对于 IText 来说情况并非如此，因为高度不会根据换行进行调整。我们可以通过使用各种属性来操作 IText 对象。同样，我们也可以使用findWordBoundaryRight方法找到单词的右边界。
语法
findWordBoundaryRight(startFrom: Number): Number
登录后复制
参数
startFrom – 此参数接受一个Number，表示当前选择索引，将为其返回右边界值的新选择索引。
示例 1
使用 findWordBoundaryRight 方法
让我们看一个代码示例，以查看使用 findWordBoundaryRight 方法时记录的输出。在这里，我们传递的值为 5，这意味着我们要检查第二个单词的右边界。因此返回值将为 10。
Using the findWordBoundaryRight method
You can open console from dev tools and see that the right boundary value is being displayed in the console
// 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", }); // Add it to the canvas canvas.add(itext); // Using findWordBoundaryRight method console.log("The new selection index is: ", itext.findWordBoundaryRight(5));
登录后复制
示例 2
使用findWordBoundaryRight方法计算第一个单词的单词边界
让我们看一个代码示例，了解如何使用 findWordBoundaryRight 方法找到第一个单词的新选择索引。在本例中，我们向 startFrom 参数传递了值 1，该值将出现在第一个单词中。因此，返回的新选择索引值为3，即右边界。
Using the findWordBoundaryRight method to calculate the word boundary for the first word
You can open console from dev tools and see that the right boundary value is being displayed in the console
// 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", }); // Add it to the canvas canvas.add(itext); // Using findWordBoundaryRight method console.log("The new selection index is: ", itext.findWordBoundaryRight(1));
登录后复制
以上就是如何使用 FabricJS 获取 IText 中单词的正确边界？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2692766.html
