オブジェクト名で指定した要素のグループ化と解除

グループ化

家を、移動／拡縮／回転させると、家ごと操作できます。

var canvas = new fabric.Canvas('cvs');

var roof = new fabric.Triangle({
  width: 160, height: 40, fill: 'red'
});

var wall = new fabric.Rect({
  left: 20, top: 40, width: 120, height: 80, fill: 'olive'
});

var window = new fabric.Rect({
  left: 40, top: 60, width: 40, height: 30, fill: 'aqua'
});

var house = new fabric.Group([roof, wall, window], {
  left: 70, top: 80
});

canvas.add(house);

屋根（roof）、壁（wall）、窓（window）それぞれの left / top 座標は基準点(0, 0)からの座標です。それらをfabric.Groupでグループ化し、黒い点の位置(70, 80)に配置しています。

グループ解除

次のボタンを押すと上記の家の屋根などが分解されます。

家のグループ解除

house.toActiveSelection();
canvas.requestRenderAll();

目的要素（この場合は"house"）にtoActiveSelection()で、それがグループ解除されます。

ユーザーが選択した要素のグループ化と解除

グループ化

すでにある要素をユーザーが複数選択し、それをグループ化させます。

グループ化 グループ解除

2つ選択してグループ化し、それと更にもう1つを選択して更にグループ化もできます。また、グループとグループを更にグループ化もできます。

それを解除すると、事前にグループ化したものはグループ状態が保持されています。更にそのグループを解除すると全て単独要素に分解できます。

つまり、グループ化のネスト（入れ子状態＝多重化）も可能です。

if (! canvas.getActiveObject()) { return; }
if (canvas.getActiveObject().type !== 'activeSelection') { return; }

canvas.getActiveObject().toGroup();
canvas.requestRenderAll();

行と説明

1,2

何も選択されていない場合や、グループ以外の要素が選択されている場合に備えて、エラー対策です。

4

getActiveObject()で選択要素を取得し、toGroup()でグループ化します。

グループ解除

if (! canvas.getActiveObject()) { return; }
if (canvas.getActiveObject().type !== 'group') { return; }

canvas.getActiveObject().toActiveSelection();
canvas.requestRenderAll();

getActiveObject()で選択要素を取得し、toActiveSelection()で解除されます。

グループ化のまとめ

このように、複数の基本図形をグループ化することで多様な図形を簡単に扱えるようになります。

最初からグループ化して配置することも、ユーザー操作を元にグループ化することも可能です。