fabric.js在vue3.2+typeScript环境中的使用

步骤

1. 下载fabric.js 不用我说了，不知道的看GitHub

2. 引入fabric.js 的type文件 (这里是重点呀)

npm install @types/fabric

这个文件下载后，是在node_module/@types下面的，我们需要将里面的 index.d.ts 和 fabric-impl.d.ts 复制到node_module/fabric下面

3. 实际使用看代码喽

<template>
  <canvas ref="domCanvas"></canvas>
</template>

<script lang="ts" setup>
import { onMounted, ref, type Ref } from "vue";
import { fabric } from "fabric";

const domCanvas: Ref<HTMLCanvasElement | null> = ref(null);
const canvas = ref<fabric.Canvas>();
const circle = ref<fabric.Circle>();

onMounted(() => {
  init();
  draw();
});

function init() {
  canvas.value = new fabric.Canvas(domCanvas.value, {
    width: 500,
    height: 500,
    backgroundColor: "#e3fdfd",
  });
}

function draw() {
  circle.value = new fabric.Circle({
    left: 100,
    top: 100,
    radius: 50,
    stroke: "black",
    fill: "red",
  });
  canvas.value?.add(circle.value);
}
</script>

特别提示

创建的fabric图形必须要用vue的 ref (reactive)，如：const circle = ref<fabric.Circle>();否则不是实时的