こんにちは！ 

今回は2年目の3人娘、まりりんが担当します！ 

世の中にはたくさん便利なライブラリが公開されていますよね。 

私もたくさんのライブラリにお世話になっています…！ 

今回は、JavaScriptのライブラリである「Fabric.js」の「オブジェクト」を中心に触れていきたいと思います！ 

Fabric.jsとは？ 

Fabric.jsは、HTML5の<canvas>要素を扱いやすくしたJavaScriptライブラリです。 

画面上での図形操作や画像の編集だけでなく、アニメーションを付けることも出来てしまいます！ 

環境 

インストール 

npmを使用する方法もありますが、今回はCDNで提供されているファイルを使用したいと思います！ 

HTMLファイルに以下の記述を行います。 

<script src="https://cdn.jsdelivr.net/npm/fabric"></script> 

オブジェクトモデル 

Fabric.jsはキャンバス上の各要素をオブジェクトとして扱います。オブジェクトとして扱うことで、簡単に要素を追加・削除・移動や回転することができます。 

 すると、下図のように赤い四角形が描画されました！ 

この四角をクリックすると、図形のサイズや角度、位置がマウス操作で自由に変更できます！便利！ 

また、図形は四角だけではなく、丸や三角形といった一般的な形から 

座標を指定することで、多角形の図形も表現することができます。 

さらに、Fabric.jsの図形はfabric.Objectクラスを継承しているので 

fabric.Objectのprototypeに関数を定義すれば、図形の形に関係なく使えるのもカスタマイズ性が高くて良いですね！ 

また、図形だけではなく、画像をオブジェクトやキャンバスの背景として扱うことも出来ます！ 

今回は画像をオブジェクトとして表示してみました。 

イベントハンドリング 

Fabric.jsでは、キャンバス上のオブジェクトに対して様々なイベントを設定することができます！ 

例えば、図形をクリックしたときに指定した処理を実行させることが可能です。 

四角をクリックすると、アラートが表示されるようになりました。 

エクスポート 

画面をリロードすると、せっかくの内容がリセットされてしまうので 

画像としてエクスポートしてみたいと思います！ 

ここまでは直接.htmlファイルを開いていましたが、エクスポート時はローカルサーバーで実行しないとCORS違反になってしまうので、VSCodeのLive Serverを使用しています。 

この状態で「画像を出力する」ボタンをクリックすると、自動的にキャンバスの内容がpng形式で出力されました！ 

さいごに 

今回はFabric.jsのごく一部に触れてみましたが、本当に多機能で触れなかった機能もたくさんあります！ 

機会を見つけてもっと触れてみたいと思います！