{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/fabric-on-angular",
  "description": "Fabric.jsをAngularで最短で動かしてみる",
  "path": "/posts/fabric-on-angular",
  "publishedAt": "2024-06-05T15:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "Angular",
    "Fabric.js"
  ],
  "textContent": "環境\n\nFabric.jsとは？\n\nhttp://fabricjs.com/\n\nCanvas内に画像やテキストを配置したりすることのできるライブラリ。\n\n配置した要素の「移動」、「リサイズ」、「回転」など非常に自由度高く操作することができる。\n\nお絵描きアプリとかを作ることができる。\n\n色々なデモ\n\nインストール\n\nbetaでバージョン6が公開されており、5から6で破壊的な変更があるっぽい。\n\nつまり5を入れておくと、いずれ大規模な修正が必要になる可能性がある。\n\nけど、解説とかは5の方が多いし、6がまだbetaということで5を入れることにした。\n\n🧐 Breaking changes for fabric 6.0\n\n次に定義ファイルも必要になったので\"npm i @types/fabric\": \"^5.3.7\",でインストールした。\n\n実装\n\ntemplate\n\nまずテンプレート側でcanvas>を作成する。\n\ncomponent\n\n次に、\n\nコンポーネント側でcanvasを取得し、\n\nfabricを呼び出す。\n\nこれで画面表示まで行けた。\n\nちなみに画面全体にcanvasを広げたい場合は、\n\nで実現できる。\n\n〇 追記\n\ninteractjsをAngularで最短で動かしてみる\n\ndomを動かしたかったというのがあるので、Fabric.jsではなくinteractを採用した。",
  "title": "Fabric.jsをAngularで最短で動かしてみる"
}