svelte - 无法在 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")运行，您的 Canvas 元素尚未创建。所以你需要把它放在 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 不会互相破坏。