環境

Angular: 15
Fabric.js: 5.3.0

Fabric.jsとは？

http://fabricjs.com/

Canvas内に画像やテキストを配置したりすることのできるライブラリ。

配置した要素の「移動」、「リサイズ」、「回転」など非常に自由度高く操作することができる。

お絵描きアプリとかを作ることができる。

色々なデモ

インストール

$ npm i fabric

betaでバージョン6が公開されており、5から6で破壊的な変更があるっぽい。

つまり5を入れておくと、いずれ大規模な修正が必要になる可能性がある。

けど、解説とかは5の方が多いし、6がまだbetaということで5を入れることにした。

🧐 Breaking changes for fabric 6.0

次に定義ファイルも必要になったので"npm i @types/fabric": "^5.3.7",でインストールした。

実装

template

<canvas width="300" height="300" #canvasEl> </canvas>

まずテンプレート側でcanvas>を作成する。

component

次に、

 @ViewChild('canvasEl') canvasEl: ElementRef | undefined;

コンポーネント側でcanvasを取得し、

ngAfterViewInit() {
  if(this.canvasEl) {
    const canvas = new fabric.Canvas(this.canvasEl.nativeElement);
    const rect = new fabric.Rect({
      top: 100,
      left: 100,
      width: 60,
      height: 70,
      fill: 'red',
    });
    canvas.add(rect);
  } else {
    throw new Error('Canvasの取得に失敗しました。')
  }
}

fabricを呼び出す。

これで画面表示まで行けた。

ちなみに画面全体にcanvasを広げたい場合は、

canvas.setDimensions({width:number, height:number});

で実現できる。

〇 追記

interactjsをAngularで最短で動かしてみる

domを動かしたかったというのがあるので、Fabric.jsではなくinteractを採用した。