
在本教程中,我们将学习如何使用 FabricJS 将 Line 对象在画布的当前视口上水平居中。 Line 元素是 FabricJS 中提供的基本元素之一。它用于创建直线。由于线元素在几何上是一维的并且不包含内部,因此它们永远不会被填充。我们可以通过创建 fabric.Line 的实例来创建线条对象,指定线条的 x 和 y 坐标并将其添加到画布中。为了使 Line 对象在画布的当前视口中水平居中,我们使用 viewportCenterH 方法。
语法
viewportCenterH(): fabric.Object
Line 对象的默认外观
示例
让我们看一个代码示例,看看不使用 viewportCenterH 方法时 Line 对象的外观。在这种情况下,Line 对象将不会在画布上水平居中。
Default appearance of the Line object
You can see that the line object is not centered horizontally with respect to the current viewport of canvas
使用viewportCenterH方法
示例
让我们看一个代码示例,看看使用 viewportCenterH 方法时线条对象的样子。在这种情况下,我们的线条对象将相对于画布的当前视口水平居中。
Using the viewportCenterH method
You can see that the line object is centered horizontally with respect to the current viewport of canvas










