Fabric.jsをAngularで最短で動かしてみる
環境 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....