在vue3中初使用fabricjs

1、安装

npm install fabric --save

2、初始使用
在 nextTick 函数里初始化canvas，不然fabricjs 无法找到canvas

<template>
   <div calss='mainBox'>
     <canvas  id="canvas"></canvas>
 </div>
</template>
<script>
import { onMounted, nextTick } from "vue";
import { fabric } from "fabric";
export default {
  name: "Polygon",
  setup() {
      onMounted(() => {
      nextTick(() => {
          canvas = new fabric.Canvas("canvas",{
            width:1000,
            height:1000,
            backgroundColor:'white'
           });
      });
    });
}
}

</script>

3.绘制基础图形

fabric.Circle
fabric.Ellipse
fabric.Line
fabric.Polygon
fabric.Polyline
fabric.Rect
fabric.Triangle
如下

 circle=new fabric.Circle({
   top:100,
   left:100,
   radius:20,
   fill:'red'    
 })
 canvas.add(circle)
 canvas.renderAll()

4.自定义控制图标

  fabric.Image.fromURL(
            require("图片路径"),
            function (image) {
              iconCallback(image, "editControl", editObj);
            }
          );
    
      var editObj = {
      x: 0.5,
      y: 0.5,
      offsetY: -16,
      offsetX: 16,
      handlerFunction: function(){},//点击图标进行的操作
      size: 24,
    };

5，设置背景图片

fabric.Image.fromURL(require("../assets/2.png"), function(images){
    image.scaleX = canvas.width / image.width;
    image.scaleY = canvas.height / image.height;
    canvas.setBackgroundImage(image);
    canvas.renderAll();
});