Fabric.js ActiveSelection getCenterPoint() 方法

在Fabric.js中，ActiveSelection对象表示了多个Canvas对象选中的集合。getCenterPoint()是ActiveSelection对象的一个方法，它用于获取选中集合的中心点位置。

语法

activeSelection.getCenterPoint();

返回值

getCenterPoint()方法返回一个包含选中集合中心点x和y坐标的对象。

使用示例

// 创建Canvas对象
var canvas = new fabric.Canvas('canvas');

// 创建三个矩形对象
var rect1 = new fabric.Rect({ width: 50, height: 50, top: 10, left: 10, fill: 'red' });
var rect2 = new fabric.Rect({ width: 50, height: 50, top: 20, left: 20, fill: 'green' });
var rect3 = new fabric.Rect({ width: 50, height: 50, top: 30, left: 30, fill: 'blue' });

// 将矩形对象添加到Canvas对象
canvas.add(rect1, rect2, rect3);

// 将两个矩形对象选中
canvas.setActiveObject(rect1);
canvas.setActiveObject(rect2);

// 获取选中集合的中心点
var centerPoint = canvas.getActiveGroup().getCenterPoint();
console.log(centerPoint);
// 输出：{ x: 30, y: 30 }

// 将选中集合转换为单个对象并设置中心点
canvas.getActiveGroup().toActiveSelection();
canvas.getActiveObject().set({
  left: centerPoint.x,
  top: centerPoint.y
});

// 重新渲染Canvas对象
canvas.renderAll();

注意事项

• 使用getCenterPoint()方法前，需要先获取ActiveSelection对象。
• 如果选中集合中只有一个对象，该方法会返回该对象的中心点。