无法在 Svelte 中使用 Fabric-js

Question

我正在开发一个需要在 Svelte 中使用 Fabric-js 的应用程序。我的代码是：

<script>
  import fabric from "fabric";

  let canv = new fabric.Canvas("c");

  const rect = new fabric.Rect({
    left: 10,
    top: 10,
    width: 20,
    height: 15,
    fill: "blue"
  });
  canv.add(rect);
</script>
  <canvas id="c" width="500" height="300" />

但我在控制台出现错误TypeError: fabric_1.Canvas is not a constructor。但是，如果我在控制台中查询结构对象，一切似乎都很好。想知道可能是什么问题。

Answer 1

您需要这样做import { fabric } from 'fabric'——如果您仔细查看您导入的对象，您会发现它有一个名为fabric.

在new fabric.Canvas("c")运行时，您的画布元素尚未创建。所以你需要把它放在一个onMount生命周期回调中：

<script>
  import { fabric } from "fabric";
  import { onMount } from 'svelte';

  let canvas;

  onMount(() => {
    let canv = new fabric.Canvas(canvas);

    const rect = new fabric.Rect({
      left: 10,
      top: 10,
      width: 20,
      height: 15,
      fill: "blue"
    });
    canv.add(rect);
  });
</script>

<canvas bind:this={canvas} width="500" height="300" />

另请注意，我使用bind:this={canvas}将 DOM 元素分配给局部变量，并使用它而不是 ID。这更加健壮，因为它允许您拥有组件的多个实例，而不会相互破坏 ID。