fabric.js 多选删除

在 fabric.js 中，可以使用 canvas.getActiveObjects() 方法获取当前选中的对象，然后使用 canvas.remove() 方法删除这些对象。例如：

var activeObjects = canvas.getActiveObjects();
canvas.remove.apply(canvas, activeObjects);
canvas.renderAll();

注意，在使用 canvas.remove() 方法之前，需要先使用 canvas.discardActiveObject() 方法取消选中状态。

相关问题

fabric.js 将多选框内的元素坐标变成相对整个画布

可以使用 Fabric.js 的 getCoords() 方法来获取多选框内元素相对于整个画布的坐标。这个方法返回一个对象，包含了该元素左上角和右下角在画布上的坐标。

例如:

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
   left: 100,
   top: 100,
   width: 50,
   height: 50,
   fill: 'red'
});
canvas.add(rect);
var coords = rect.getCoords();
console.log(coords);

`coords` 的值为 {tl: {x: 100, y: 100}, tr: {x: 150, y: 100}, bl: {x: 100, y: 150}, br: {x: 150, y: 150}}

fabric.js 将多选的模块组合成一个组

使用 fabric.js 可以将多个选中的模块组合成一个组。可以使用 `fabric.Group` 类将多个对象分组。在创建组对象时，可以将选中的对象作为参数传递给构造函数。例如：

var group = new fabric.Group(arrayOfObjects, {
  left: 150,
  top: 100,
  angle: 0
});

可以将选中的对象通过数组形式传递给构造函数，通过left,top,angle参数来设置组的坐标，角度。

另外还可以使用 canvas.add(group) 来添加到画布上。

在组内对象的操作,可以使用 group.addWithUpdate(object) 或者 canvas.remove(object)来对组内对象进行操作

此外还有很多其他的组操作可以参考文档。