1. FabricJS 简介
FabricJS 是一个基于 HTML5 canvas 元素的对象级别的 JavaScript 库，它允许用户轻松构建交互式的对象模型并在 canvas 上绘制图形。使用 FabricJS，用户可以创建丰富的图形对象，包括文本、形状、图像和视频。FabricJS 的 API 很简单易懂，使其极易上手，但同时它也提供了许多高级功能，如事件处理、定位、动画和缩放等。
2. IText 对象
在 FabricJS 中，IText 是一个非常实用的对象。它是一个文本对象，可以对其中的文本进行编辑，并且拥有许多高级特性，如运动、选择和点选等。用户可以轻松地创建 IText 对象，并利用其多种特性进行更加精细的控制。
3. 对象相对于 IText 中画布的当前视口垂直居中实现方法
要实现对象相对于 IText 中画布的当前视口垂直居中可能看起来有些棘手。不过，借助 FabricJS 的特性，我们很快就可以实现这个效果。
3.1 获取 IText 对象的画布
在开始操作之前，我们首先需要获取 IText 对象的画布。代码如下：
var textObject = new fabric.IText("Some Text!", {
fontFamily: "Helvetica",
left: 100,
top: 100,
fill: "white"
});
// 获取画布
var canvas = textObject.canvas;
上述代码创建了一个 IText 对象，并获取了该对象的画布。我们将在接下来的步骤中使用该画布来实现所需的效果。
3.2 计算对象相对于当前视口的高度
首先，我们需要计算出对象相对于当前视口的高度。要做到这一点，我们需要将以下步骤进行：
获取当前视口的高度。
获取对象在原始缩放级别上的高度。
计算当前对象在缩放级别为 1 时的高度。
计算当前对象相对于当前视口的高度。
代码如下：
// 获取当前视口高度
var viewportHeight = canvas.viewportTransform[3];
// 获取对象在原始缩放级别上的高度
var originalObjectHeight = textObject.getScaledHeight();
// 计算当前对象在缩放级别为 1 时的高度
var objectHeight = originalObjectHeight / canvas.getZoom();
// 计算当前对象相对于当前视口的高度
var objectHeightFromViewportCenter = (viewportHeight - objectHeight) / 2;
上述代码计算出当前对象相对于当前视口的高度。
3.3 重新定位对象
最后一步是根据计算出的高度值，重新定位对象。要做到这一点，我们将使用 FabricJS 的 setTop() 方法。该方法将使对象相对于画布重新定位。代码如下：
// 重新定位对象
textObject.setTop(objectHeightFromViewportCenter);
通过执行上述代码，我们已经成功地将对象相对于 IText 中画布的当前视口垂直居中。
4. 总结
在本文中，我们介绍了 FabricJS 的基本概念、IText 对象的特性以及如何使用 FabricJS 实现对象相对于 IText 中画布的当前视口垂直居中。虽然这可能看起来很困难，但 FabricJS 提供的一些内置函数使这个过程变得相对简单，而且总体来说，FabricJS 的工作流程并不会太难掌握。