{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/interact-on-angular",
  "description": "interactjsをAngularで最短で動かしてみる",
  "path": "/posts/interact-on-angular",
  "publishedAt": "2024-06-13T15:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "Angular",
    "interactjs"
  ],
  "textContent": "環境\n\ninteractjsとは？\n\nhttps://github.com/taye/interact.js\n\nJavaScriptでドラッグ＆ドロップ、リサイズ、マルチタッチジェスチャー（慣性とスナッピング機能付き）を実装できるライブラリ。\n\n色々なデモ\n\nインストール\n\nでインストール。\n\n実装\n\ntemplate\n\nまずテンプレート側でdivを作成する。\n\ncomponent\n\n次に、\n\nコンポーネント側でcanvasを取得し、\n\ninteractを呼び出す。\n\nこれで画面表示まで行けた。\n\n後は自由にカスタマイズしていける。\n\nカスタマイズ\n\n- 要素を自由にカスタマイズしたかったので、translateではなくabsoluteにした\n- 複数要素に対応\n- ドラッグやリサイズはハンドルを使用する\n\nとかいろいろ、やりたいことは結構実現できるカスタマイズ性の高いライブラリーだった。\n\nFabric.jsをAngularで最短で動かしてみる\n\ndomを動かしたかったというのがあるので、Fabric.jsではなくinteractを採用した。",
  "title": "interactjsをAngularで最短で動かしてみる"
}