Vue3使用fabric.js实现可以加载图片与绘制功能的画布

<template>
  <div>
    <canvas ref="canvasEl" style="border:1px solid #000000;"></canvas>
  </div>
</template>
 
<script>
import { onMounted, ref } from 'vue';
import { fabric } from 'fabric';
 
export default {
  setup() {
    const canvasEl = ref(null);
    let canvas = null;
 
    onMounted(() => {
      canvas = new fabric.Canvas(canvasEl.value);
 
      // 加载图片
      fabric.Image.fromURL('path/to/your/image.jpg', (img) => {
        img.scaleToWidth(200); // 设置图片宽度为200
        canvas.add(img);
      });
 
      // 绘制图形
      const rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill: 'blue',
        width: 20,
        height: 20
      });
      canvas.add(rect);
    });
 
    return {
      canvasEl
    };
  }
};
</script>

这段代码使用Vue 3的Composition API和fabric.js创建了一个基本的画布。在组件被挂载后（onMounted 生命周期钩子），初始化了一个fabric.Canvas实例，并从指定的图片URL加载了一个图片对象，然后将其添加到画布上。同时，代码中还演示了如何添加一个简单的蓝色矩形（fabric.Rect）到画布上。这个例子提供了一个基本框架，可以根据具体需求进行扩展和定制。