Fabric.js ActiveSelection toGroup() 方法

在Fabric.js中，如果需要把多个对象作为一个组来进行处理，可以使用ActiveSelection类。当选择多个对象时，会创建一个ActiveSelection实例，该实例可以调用toGroup()方法将其转换为一个Group实例。

ActiveSelection类

ActiveSelection类表示选中的对象集合，它继承自Group类。当您选择多个对象时，将创建ActiveSelection实例并将这些对象添加到该实例中。您可以通过访问canvas的activeSelection属性来访问当前的ActiveSelection实例。

例如，假设我们有三个对象：一个矩形，一个圆形和一个文本对象。如果我们选择它们，将创建一个ActiveSelection实例：

var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({ left: 100, top: 100, width: 100, height: 100 });
var circle = new fabric.Circle({ left: 150, top: 150, radius: 50 });
var text = new fabric.Text('Hello Fabric!', { left: 200, top: 200 });
canvas.add(rect, circle, text);

// 选择多个对象，将创建ActiveSelection实例
canvas.setActiveObject(new fabric.ActiveSelection(canvas.getObjects()));

现在，我们就可以通过访问canvas的activeSelection属性来访问ActiveSelection实例，例如，我们可以将多个对象移动或旋转：

// 移动到其他位置
canvas.getActiveObject().left = 300;
canvas.getActiveObject().top = 300;

// 旋转
canvas.getActiveObject().set('angle', 45);
canvas.renderAll();

toGroup()方法

如果您想将ActiveSelection实例转换为一个Group实例，可以调用toGroup()方法：

canvas.getActiveObject().toGroup();

此时，ActiveSelection实例将转换为一个Group实例，包含选中的所有对象。现在，您可以像处理任何其他Group实例一样处理它们，例如，您可以在其中添加或删除对象：

var group = canvas.getActiveObject().toGroup();

// 向组添加一个新对象
var newObject = new fabric.Rect({ left: 350, top: 350, width: 50, height: 50 });
group.addWithUpdate(newObject);
canvas.renderAll();

// 从组中删除一个对象
group.removeWithUpdate(circle);
canvas.renderAll();

另外，您还可以将Group实例转换回ActiveSelection实例：

group.toActiveSelection();
canvas.renderAll();

结论

ActiveSelection类提供了一种选择多个对象的方法，并将它们作为一个集合来处理。toGroup()方法允许您将这些对象转换为一个Group实例，使您可以在其上执行各种操作。您还可以在Group实例中添加和删除对象，然后将其转换回ActiveSelection实例。使用Fabric.js，您可以轻松处理多个对象并创建交互式和动态的用户界面。