Fabric.js ActiveSelection viewportCenter() 方法

Fabric.js是一款能够创建交互式二维绘图的开源JavaScript库。而ActiveSelection是Fabric.js的一个类，它代表了选中的一组对象。viewportCenter()是ActiveSelection类的其中一个方法。

方法介绍

viewportCenter()方法返回选中的这一组对象在当前视口中心的坐标。当你选中多个对象时，它会计算这些对象的中心点，然后返回它们在视口中心位置的坐标。

语法

activeSelection.viewportCenter()

返回值

viewportCenter()方法返回一个包含选中对象在视口中心位置的x和y坐标的对象。

示例

// 创建一个canvas
var canvas = new fabric.Canvas('canvas');

// 创建两个圆形对象
var circle1 = new fabric.Circle({
  radius: 50,
  fill: 'red',
  left: 100,
  top: 100
});

var circle2 = new fabric.Circle({
  radius: 50,
  fill: 'green',
  left: 200,
  top: 200
});

// 将两个圆形对象添加到canvas中
canvas.add(circle1, circle2);

// 选中这两个圆形对象
canvas.setActiveObject(new fabric.ActiveSelection([circle1, circle2], {
  canvas: canvas
}));

// 获取选中对象的视口中心坐标
var center = canvas.getActiveObject().viewportCenter();

// 输出坐标信息
console.log(center.x, center.y);

总结

viewportCenter()方法能够帮助你计算选中对象的中心点在当前视口中心的坐标。它非常有用，在处理多个对象的时候，能够方便地获取它们的中心点坐标信息。