canvasでFabric.jsを使用して図形変更やユーザ操作を便利にする

公開：2019-12-20

更新：2020-01-13

HTML5のcanvasでFabric.jsというJavaScriptライブラリを使用すると、図形や画像などがオブジェクト化されて描画後の変更が便利になり、ユーザによる移動や変形できる機能性を提供してくれます。

Fabric.jsとは、その入門的な部分をデモ付きで紹介します。

図形の重なりと後の変更

JavaScriptネイティブの場合

HTML5のcanvasで図形を描く一例です。先ずFabric.jsを使用せずJavaScriptのみの場合です。

<canvas id="cvs" width="300" height="240"></canvas>

var ctx = document.getElementById("cvs").getContext("2d");

//赤い四角
ctx.fillStyle = 'orangered';
ctx.fillRect(80, 80, 120, 80);

//青い円
ctx.fillStyle = 'royalblue';
ctx.(190, 140, 40, 0, Math.PI*2);
ctx.fill();

Fabric.jsを使用した場合

次はFabric.jsを使用した書き方で、見た目全く同じに描かれます。HTMLは同じです。

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

//赤い四角
var rect = new fabric.Rect({
  left: 80, top: 80, width: 120, height: 80, fill: 'orangered'
});

//青い円
var circle = new fabric.Circle({
  left: 150, top: 100, radius: 40, fill: 'royalblue'
});

canvas.add(rect, circle);

ここまではさほどの違いはありません。問題は描いた後です。

例えば円の色を変えたり移動したい場合、JavaScriptのみで後ろの四角の再描画をどうしましょう？例えばcanvas全てクリアして再度描くのも１つの方法ですが、図形が多かったり複雑な場合はパフォーマンスに影響しかねません。

Fabric.jsを使用すると、たったのこれだけです。円の座標を変えて緑になります。

circle.set({
  left: 60, fill: 'green'
});

canvas.renderAll();

背後の描き直しは自動的に行ってくれます。このように図形をただ描いて終わりではなく、後に変更する場合に便利になります。

インタラクティブ

下の図形１つをクリック／タップしてみてください。

水色の枠で囲まれ、その図形をつまんでドラッグすると移動できます。また、ハンドル（周囲の小さな四角）の１つをつまんでドラッグすると拡縮や回転ができます。

図形の無い部分をクリック／タップすると選択解除されます。

次に２つ共枠内に囲むか図形にかかるようにドラッグ選択してみてください。２つの図形を同時に移動や拡縮回転できます。

このように、図形配置後にユーザが移動や拡縮など変更操作できる機能を提供してくれます。これらはパソコンのマウスでも、スマートフォンなどタッチデバイスでも同様に動作します。

ここでは省略しますが、図形の原型を留めておきたいなどでユーザーにこの動作をさせたくない場合はこの機能をオフにすることも可能です。

その他

テキスト、画像、イメージ、グループ化、座標によるパス、イベント、JSON/SVGでシリアライズ／デシリアライズ、フリーハンド、などなど他にも紹介したい内容は多いのですが、このページは入門目的ですのでここまでとし、別途の記事とさせていただきます。