时间戳

首页 > 解决方案 > 无法在 Svelte 中使用 Fabric-js

svelte - 无法在 Svelte 中使用 Fabric-js

问题描述

我正在开发一个需要 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。但是，如果我在控制台中查询结构对象，一切似乎都很好。想知道可能是什么问题。

标签： svelte

解决方案

您需要这样做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 不会相互冲突。

推荐阅读