使用 Fabric.js 选择画布上的所有对象答案

【问题标题】：Select All the objects on canvas using Fabric.js使用 Fabric.js 选择画布上的所有对象
【发布时间】：2014-01-02 19:05:39
【问题描述】：

有没有一种方法可以显式选择特定时间实例中存在的所有对象。这可以很容易地使用鼠标选择所有。是否有一个代码解决方案，例如名为 Select All 的按钮，以便单击它会选择所有结构类型对象，然后我可以使用 canvas.getActiveGroup(); 将更改应用于整个 ActiveGroup 并迭代。

【问题讨论】：

标签： javascript html5-canvas fabricjs

【解决方案1】：

好问题。

对此没有内置方法，但您需要按照以下方式进行操作：

var objs = canvas.getObjects().map(function(o) {
  return o.set('active', true);
});

var group = new fabric.Group(objs, {
  originX: 'center', 
  originY: 'center'
});

canvas._activeObject = null;

canvas.setActiveGroup(group.setCoords()).renderAll();

代码应该是不言自明的，当您使用鼠标、shift+click 等时，它几乎就是幕后发生的事情。

【讨论】：

又是一个完美的工作解决方案。非常感谢@kangax！
如果组已经存在，此代码会导致对象跳转位置。如果您在此代码之前调用canvas.deactivateAll();，它会起作用（并取出canvas._activeObject = null; 行，因为它不再需要）。
嗨！有什么办法可以将 Shift+Click 覆盖为 Ctrl+Click？
这样的解决方案不再起作用，因为 get/set activeGroup 已从结构中删除，而只支持“activeObject”。请参阅下面 Tom-Steve 的回答。
我正在使用 typescript 并且 active 不是 object.set 中联合类型的一部分

【解决方案2】：

使用当前版本的 fabric.js (2.3.1) 你可以这样做：

canvas.discardActiveObject();
var sel = new fabric.ActiveSelection(canvas.getObjects(), {
  canvas: canvas,
});
canvas.setActiveObject(sel);
canvas.requestRenderAll();

这是来自演示页面的引用：http://fabricjs.com/manage-selection

【讨论】：

【解决方案3】：

canvas.setActiveGroup 不再是一个选项。它在 2.0 版本中作为一个函数被删除

【讨论】：

【解决方案4】：

这是一个更紧凑的形式：

canvas.setActiveGroup(new fabric.Group(canvas.getObjects())).renderAll();

【讨论】：

这使我的对象的位置跳跃。

【解决方案5】：

selectAllObjects() {
    this.canvas.discardActiveObject();
    this.canvas.discardActiveGroup();

    let objects: Fabric.Object[] = this.canvas.getObjects().map(function (object: Fabric.Object) {
        return object.set('active', true);
    });

    if (objects.length === 1) {
        this.canvas.setActiveObject(objects[0]);
    } else if (objects.length > 1) {
        let group: Fabric.Group = new Fabric.Group(objects.reverse(), {
            canvas: this.canvas
        } as any);
        group.addWithUpdate(null);
        this.canvas.setActiveGroup(group);
        group.saveCoords();
        this.canvas.trigger("selection:created", {
            target: group
        });
    }

    this.canvas.renderAll();
}

【讨论】：