引入 Fabric.js 套件

首先，在你的 HTML 文件中引入 Fabric.js。

引入方式1：你可以從 CDN 引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>

引入方式2：也可以用下載套件的方式

$ npm install fabric --save
// or
$ yarn add fabric

詳細方式請見官方文件：fabric.js-installation

如果有使用 TypeScript 的話，要從 @types/fabric 來獲取 TypeScript 的類型定義。

npm install --save-dev @types/fabric

就可以在 js 裡引用了

import { fabric } from 'fabric';

創建畫布

使用原生 Js 初始化

使用原生在初始化時比較簡潔，只要將 canvas 的 dom 與 new fabric.Canvas 綁定就好。

  <canvas id="canvas" width="800" height="600"></canvas>

// 獲取畫布元素
const canvasEl = document.getElementById('canvas');

// 初始化 Fabric.js 畫布
const canvas = new fabric.Canvas(canvasEl, { 
	backgroundColor: '#b5b5b5', 
	selection: true, 
});

使用 React 和 TypeScript 初始化

先開一隻檔案，來存放放置 canvas 的 html 元素與初始化 fabric.js 畫布

// FabricJSCanvas.tsx
import React, { useEffect, useRef } from 'react';
import { fabric } from 'fabric'; // 引入 fabric.js

type FabricJSCanvasProps = {
  updateCanvasContext: (canvas: fabric.Canvas | null) => void;
}

export const FabricJSCanvas = ({ updateCanvasContext }:{updateCanvasContext:FabricJSCanvasProps}) => {
  const canvasEl = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (!canvasEl.current) return;

    // 定義 canvas 選項
    const options: fabric.ICanvasOptions = 
    { 
		backgroundColor: '#b5b5b5', 
		selection: true, 
      // 在這裡添加你的 canvas 配置選項初始值
    };

    // 初始化 Fabric.js 畫布(把 canvasEl 綁定到我們的 new fabric.Canvas 上)
    const canvas = new fabric.Canvas(canvasEl.current, options);
    updateCanvasContext(canvas);

    // 組件卸載時清理資源
    return () => {
      updateCanvasContext(null);
      canvas.dispose();
    };
  }, [updateCanvasContext]); // 添加依賴數組，確保 useEffect 只在組件掛載和卸載時運行

  return <canvas width="300" height="300" ref={canvasEl} />;
};

在要使用他的組件上引入已寫好的 FabricJSCanvas 元件

// App.tsx
import React, { useState } from 'react';
import { FabricJSCanvas } from './FabricJSCanvas';
import { fabric } from 'fabric';

const App: React.FC = () => {
  const [canvas, setCanvas] = useState<fabric.Canvas | null>(null);

  // 更新畫布上下文的函數
  const updateCanvasContext = (canvas: fabric.Canvas | null) => {
    setCanvas(canvas);
  };

  return (
    <div>
      <h1>Fabric.js with React and TypeScript</h1>
      <FabricJSCanvas updateCanvasContext={updateCanvasContext} />
      {/* 你可以在這裡使用 canvas 這參數來進行更多操作 */}
    </div>
  );
};

export default App;

fabric.Canvas 常用的屬性：

最後是畫布的常用屬性列表，這些參數可以讓我們直接更改畫布的屬性

這些屬性可以在初始化 Fabric.js 畫布時進行設置（都不用設定也是可以），例如：

const canvas = new fabric.Canvas('canvas', {
  backgroundColor: 'lightgrey',
  selection: true,
  preserveObjectStacking: true,
  hoverCursor: 'pointer',
  defaultCursor: 'default',
  isDrawingMode: false
});

// 如果什麼都不設定
const canvas = new fabric.Canvas('canvas');

這樣，你就可以根據需要配置畫布的各種屬性了。