
在本教程中,我们将学习如何使用 FabricJS 将对象相对于 IText 中画布的当前视口垂直居中。 IText 类是在 FabricJS 版本 1.4 中引入的,它扩展了 Fabric.Text 并用于创建 IText 实例。 IText 实例使我们可以自由选择、剪切、粘贴或添加新文本,而无需额外配置。还有各种支持的按键组合和鼠标/触摸组合使文本具有交互性,而 Text 中未提供这些组合。
然而,基于 IText 的 Textbox 允许我们调整文本矩形的大小并自动换行。对于 IText 来说情况并非如此,因为高度不会根据换行进行调整。我们可以通过使用各种属性来操作 IText 对象。同样,我们可以使用 viewportCenterV 方法将对象相对于画布的当前视口垂直居中。
语法
viewportCenterV(): fabric.Object
示例 1
IText 对象的默认外观
让我们看一个代码示例,看看不使用 viewportCenterV 方法时 IText 对象的外观。在这种情况下,itext 对象将不会在画布上垂直居中。
Default appearance of the IText object
You can see that the itext object has not been centered vertically withrespect to the current viewport of canvas
示例 2
使用viewportCenterV方法
让我们看一个代码示例,看看使用 viewportCenterV 方法时 IText 对象是什么样子。在这种情况下,我们的 IText 对象将相对于画布的当前视口居中。
Using the viewportCenterV method
You can see that the itext object has been centered vertically with respect to the current viewport of canvas










