官网

初始化画布

<template>
  <div id="fabric">
    <canvas ref="canvas" id="labelCanvas"> </canvas>
  </div>
</template>

    init() {
      this.editorCanvas = new fabric.Canvas("labelCanvas", {
        // devicePixelRatio: true,
        width: "500", // canvas 宽
        height: "500",
        backgroundColor: "#ffffff",
        transparentCorners: false,
        fireRightClick: true, // 启用右键，button的数字为3
        stopContextMenu: true, // 禁止默认右键菜单
      });
    },

绘制

矩形

    const rect = new fabric.Rect({
        top: 100, // 距离容器顶部 100px
        left: 100, // 距离容器左侧 100px
        fill: "orange", // 填充 橙色
        width: 100, // 宽度 100px
        height: 100, // 高度 100px
        opacity: 0.5,
        lockRotation: true, // 锁定旋转
        // lockScalingFlip: true // 当“true”时，无法通过缩放为负值来翻转对象
      });
      // 将矩形添加到画布中
      this.editorCanvas.add(rect);

绘制组合内容

矩形+文字

    const drawingObject = new fabric.Rect({
        width: 100,
        height: 100,
        fill: "#d70202",
        strokeWidth: 2,
        lockRotation: true,
        opacity: 0.5,
        // originX: "center", // 居中
        // originY: "center", // 居中
      });
      const text = new fabric.Textbox("1", {
        fontFamily: "Helvetica",
        fill: "white", // 设置字体颜色
        fontSize: 14,
        textAlign: "left",
        lockScalingX: true,
        lockScalingY: true,
        lockScalingFlip: true, // 禁止负值反转
        // originX: "center", // 居中
        // originY: "center", // 居中
      });
      const group = new fabric.Group([drawingObject, text], {
        left: 200,
        top: 100,
        width: 100,
        height: 100,
        lockScalingFlip: true,
        fill: "green",
      });
      this.editorCanvas.add(group);

修改组合元素下的某一元素内容

    group.item(0).set('fill', 'green')

    /**
        this.activeEl: 选中的元素
        this.editorCanvas.getObjects(): 获取所有元素
    */
    this.editorCanvas.getObjects().forEach((item) => {
          // console.log("item", item);
          if (item.rectId == this.activeEl.rectId) {
            // console.log("item", item);
            item.set({
              textID,
            });
            item.item(1).set({
              text,
              originX: "center",
              originY: "center",
              textAlign: "center",
            });
          }
        });
        this.editorCanvas.requestRenderAll();

(组合元素)拖动四个角缩放时文字变形处理

    this.editorCanvas.on("object:scaling", (options) => {
        // console.log("scale", options);
        var text = options.target.item(1);
        let group = options.target;
        console.log("text", text.width, group.width, group.getScaledWidth());
        let scaleX = group.width / group.getScaledWidth();
        let scaleY = group.height / group.getScaledHeight();
        text.set({
          fontSize: 14,
          scaleX,
          scaleY,
        });
      });

保存自定义属性

自定义属性

    localStorage.setItem(
        "canvasdata",
        JSON.stringify(
          this.editorCanvas.toJSON(["rectId", "textID", "lockScalingFlip"])
        )
    );

回显内容

    // 根据canvas绘制保存的内容
    const str = JSON.parse(localStorage.getItem("canvasdata"));
    if (str) {
        // this.editorCanvas.loadFromJSON(str)
        this.editorCanvas.loadFromJSON(
          str,
          this.editorCanvas.renderAll.bind(this.editorCanvas),
          function (o, object) {
            // `o` = json object
            // `object` = fabric.Object instance
            // ... do some stuff ...
            // console.log('objqwe', o, object)
          }
        );
      }