# Fabric.jsをAngularで最短で動かしてみる
2 min read
Table of Contents
環境
Angular: 15Fabric.js: 5.3.0Fabric.jsとは？
Canvas内に画像やテキストを配置したりすることのできるライブラリ。
配置した要素の「移動」、「リサイズ」、「回転」など非常に自由度高く操作することができる。
お絵描きアプリとかを作ることができる。
インストール
$ npm i fabricbetaでバージョン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});で実現できる。
〇 追記
domを動かしたかったというのがあるので、Fabric.jsではなくinteractを採用した。
