Fabric.jsをAngularで最短で動かしてみる

環境 Fabric.jsとは？ http://fabricjs.com/ Canvas内に画像やテキストを配置したりすることのできるライブラリ。 配置した要素の「移動」、「リサイズ」、「回転」など非常に自由度高く操作することができる。 お絵描きアプリとかを作ることができる。 色々なデモ インストール betaでバージョン6が公開されており、5から6で破壊的な変更があるっぽい。 つまり5を入れておくと、いずれ大規模な修正が必要になる可能性がある。 けど、解説とかは5の方が多いし、6がまだbetaということで5を入れることにした。 🧐 Breaking changes for fabric 6.0 次に定義ファイルも必要になったので"npm i @types/fabric": "^5.3.7",でインストールした。 実装 template まずテンプレート側でcanvas>を作成する。 component 次に、 コンポーネント側でcanvasを取得し、 fabricを呼び出す。 これで画面表示まで行けた。 ちなみに画面全体にcanvasを広げたい場合は、 で実現できる。 〇 追記 interactjsをAngularで最短で動かしてみる domを動かしたかったというのがあるので、Fabric.jsではなくinteractを採用した。