web-dev-qa-db-ja.com

Fabric.jsを使用してキャンバス上のすべてのオブジェクトを選択します

特定の時間に存在するすべてのオブジェクトを明示的に選択する方法はありますか？これは、すべてを選択するためにマウスを使用して簡単に行うことができます。 _Select All_という名前のボタンのようなコードソリューションはありますか。それをクリックすると、すべてのファブリックタイプオブジェクトが選択され、canvas.getActiveGroup();を使用してそのActiveGroup全体に変更を適用して反復できます。以上。

javascripthtml5-canvasfabricjs
24
softvar

良い質問。

これには組み込みの方法はありませんが、次のように何かを行う必要があります。

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キーを押しながらクリックしたりすると、フードの下で何が起こっているかはほとんど変わりません。

35
kangax

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

8
Tom-Steve Watzke

これはよりコンパクトな形式です：

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

canvas.setActiveGroupオプションではなくなりました。バージョン2.0の機能として削除されました

1
Cenlan
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();
}
1
Milan Hlinák