Fabric.jsでcanvasの図形を選択状態にする、解除する

公開：2020-05-13

HTML5のcanvasでJavaScriptライブラリのFabric.jsを使用し、図形など要素（オブジェクト）を選択状態に、また選択状態を解除する方法です。ユーザー操作によらず、コードで意図的にハンドルを表示させるために用います。

既存要素の場合と、要素を新規生成の場合とで説明しています。

選択状態にする

既存要素の場合と、要素を新規生成の場合とで説明します。

既存要素の場合

setActiveObject() で選択状態になります。

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

var rect = new fabric.Rect({
  left: 40, top: 80, width: 100, height: 60, fill: 'royalblue'
});

var circle = new fabric.Circle({
  left: 180, top: 140, radius: 30, fill: 'orangered'
});

canvas.add(rect, circle);

$('#btn-rect').click(function(){
  canvas.setActiveObject(rect);
  canvas.renderAll();
});

$('#btn-circle').click(function(){
  canvas.setActiveObject(circle);
  canvas.renderAll();
});

renderAll()をしないと反映されません。

ある要素を選択状態にすれば、その前に選択されていた別要素は自動で解除になります。複数の要素に続けて行っても、後に設定された要素のみが選択状態になります。

canvas1.setActiveObject(rect);
canvas1.setActiveObject(circle);	//最終的にこちらのみ

setActiveObject() の引数はオブジェクト1つのみです。配列で複数指定してもできませんでした。公式サイトによると「,」で区切った２つ目の引数はイベント関係のようです。よって複数要素を選択状態にするには工夫が必要でしょう。

canvas1.setActiveObject(rect, circle);		//反応もエラーもなし
canvas1.setActiveObject([rect, circle]);	//TypeError

コードである1つの要素を選択状態にし、更にユーザーがshift＋別の要素選択であれば、複数選択が可能です。

要素を新規生成の場合

add に続けて setActiveObject() を書くと、要素が新たに生成した時に選択状態になります。

var rect = new fabric.Rect({
  left: 80, top: 120, width: 100, height: 60, fill: 'royalblue'
});

canvas.add(rect).setActiveObject(rect);

選択状態を解除する

discardActiveObject()で全ての選択状態が解除になります。ユーザーが選択したものがあればそれも解除されます。

$('#btn-dis').click(function(){
  canvas.discardActiveObject();
  canvas.renderAll();
});

これも renderAll()をしないと反映されません。