FabricJS：怎样把 Line 对象放置在画布当前视口中心

在使用FabricJS进行图形绘制和操作时，将Line对象精准放置在画布当前视口中心是一个常见需求。掌握这一技巧，能够提升图形布局的美观性与实用性。

要明确画布视口中心的坐标计算方法。在FabricJS中，画布的宽度和高度可以通过相应的属性获取。假设画布对象为canvas，获取画布宽度可使用canvas.getWidth() ，获取高度则用canvas.getHeight() 。而视口中心的x坐标为画布宽度的一半，即centerX = canvas.getWidth() / 2；y坐标为画布高度的一半，即centerY = canvas.getHeight() / 2。

接下来创建Line对象。FabricJS提供了简洁的方式来创建Line。例如：

var line = new fabric.Line([0, 0, 100, 100], {
    stroke: 'black',
    strokeWidth: 2
});

上述代码创建了一条从(0, 0)到(100, 100)，颜色为黑色，线宽为2的直线。

关键的一步是将Line对象放置到视口中心。要实现这一点，需要调整Line对象的位置属性。由于Line对象的位置是基于其起始点，所以要根据视口中心坐标和Line对象的长度来计算合适的偏移量。 假设Line对象的起始点为(startX, startY) ，终点为(endX, endY) 。计算水平方向偏移量deltaX = centerX - (startX + endX) / 2；垂直方向偏移量deltaY = centerY - (startY + endY) / 2。然后通过设置Line对象的left和top属性来移动它：

line.set({
    left: line.left + deltaX,
    top: line.top + deltaY
});

最后，将Line对象添加到画布上：

canvas.add(line);

通过以上步骤，就能轻松地将Line对象放置在FabricJS画布的当前视口中心。无论是简单的直线绘制，还是复杂的图形组合，这一方法都能确保图形在视口中处于理想的位置。在实际应用中，还可以结合事件监听和动画效果，进一步丰富用户交互体验，让基于FabricJS的绘图应用更加生动和实用。