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不会相互干扰。

无法在Svelte中使用Fabric-js

1 个答案: