アイコンWeb制作実験

HTML/CSS/jQuery/Fabric.js を試した様子と結果です.

Fabric.jsでcanvasの図形のグループ化や解除をする

イメージ

公開:

HTML5のcanvasでJavaScriptライブラリのFabric.jsを使用し、図形など要素(オブジェクト)を、グループ化及びグループ解除する方法です。複数の図形を1つの図形のように扱えます。

オブジェクト名で指定した要素の場合、ユーザーが選択した要素の場合、の2通りで説明しています。

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

グループ化

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

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()で解除されます。

グループ化のまとめ

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

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