框选元素中包含分组，旋转时线条跟随矩形中心点移动实现方式？

Question

框选元素中包含分组，旋转时线条跟随矩形中心点移动。
旋转前：
旋转后：

目前采用方法是自己通过三角形余玄函数rotatoNi函数来算坐标的，不知道有没有什么其他方法。（类似fabric提供的函数或属性来更新坐标）

<template>
  <div>
    <div class="btn" @click="setzoom(0.1)">放大</div>
    <div class="btn" @click="setzoom(-0.1)">缩小</div>
    <div class="btn" @click="addbox">添加</div>
    <div class="btn">初始坐标: X:{{pointer.x.toFixed(0)}} Y:{{pointer.y.toFixed(0)}}</div>
    <section style="margin: 0 auto;
    clear: both;
    width: 1000px;
    border: 1px solid yellow;">
      <canvas id="can" class="can" width="600" height="600" style="border:1px solid red;"></canvas>
    </section>
  </div>
</template>

<script>
var canvas;
var lineArr = {};
var triangle = {};
var canvasDom
var firstAdd
import bus from "@/assets/js/bus.js";
import { fabric } from "fabric";
import myCanvas from "./myCanvas";
export default {
  computed: {
  },
  data () {
    return {
      allData: [], //所有箱体数据
      pointer: {
        x: 0,
        y: 0
      },
      i: 1,
      plist: [],
      setColor: ['#FF0000', '#F2C94C', '#EBFF00', '#9B51E0', '#6FCF97',
        '#F2F2F2', '#00FFF0', '#33FF00', '#00A3FF', '#FF00C7', '#FF7A00', '#0075FF']
    };
  },
  mounted () {
    this.initCanvas()
    this.getboxList()
  },
  watch: {
  },
  methods: {
    //移动和旋转
    movAndrotat (p, type) {
      let that = this;
      if (p) {
        if (p.isCheckTo) {
          //单选
          p._objects[2].set({ angle: -parseFloat(p.angle) }); //单个旋转文字角度不变
          that.allData.forEach((item, k) => {
            if (item.id == p.id) {
              item.rotationAngle = parseFloat(p.angle) % 360;
              item.x = p.calcOwnMatrix()[4];
              item.y = p.calcOwnMatrix()[5];
              item.operateType = "moving";
            }
          });
        } else {
          //多选箱体
          if (p.type == "group" && p.groupId != "box") {
            // 页面直接选择某分组
            let objs = p._objects;
            let ownMatrixCache = p.ownMatrixCache;
            objs.forEach((obj, objIndex) => {
              that.allData.forEach((item) => {
                if (item.id == obj.id) {
                  if (type == "moving") {
                    let gg = that.rotatoNi(
                      obj.ownMatrixCache.value[4] + ownMatrixCache.value[4],
                      obj.ownMatrixCache.value[5] + ownMatrixCache.value[5],
                      ownMatrixCache.value[4],
                      ownMatrixCache.value[5],
                      parseFloat(p.angle)
                    );
                    item.x = gg.x;
                    item.y = gg.y;
                  } else if (type == "rotating") {
                    item.rotationAngle = (parseFloat(obj.angle) + parseFloat(p.angle)) % 360;
                    let gg = that.rotatoNi(
                      obj.ownMatrixCache.value[4] + ownMatrixCache.value[4],
                      obj.ownMatrixCache.value[5] + ownMatrixCache.value[5],
                      ownMatrixCache.value[4],
                      ownMatrixCache.value[5],
                      parseFloat(p.angle)
                    );
                    item.x = gg.x;
                    item.y = gg.y;
                  }
                }
              });
              obj._objects[2].set({ angle: -((parseFloat(p.angle) + parseFloat(obj.angle)) % 360) }).setCoords()
            });
          } else {
            var arr = p._objects;
            for (var i = 0; i < arr.length; i++) {
              if (arr[i].type == "group" && arr[i].groupId == "box") {
                let angle =
                  parseInt(parseFloat(arr[i].angle) + parseFloat(p.angle)) % 360;
                arr[i]._objects[2].set({ angle: -angle }); //单个旋转文字角度不变
                that.allData.forEach((item) => {
                  if (item.id == arr[i].id) {
                    item.rotationAngle = angle;
                    item.x = arr[i].matrixCache.value[4];
                    item.y = arr[i].matrixCache.value[5];
                  }
                });
              } else if (arr[i].type == "group" && arr[i].groupId != "box") {
                let _objs = arr[i]._objects;
                let groupValue = arr[i].matrixCache.value;
                _objs.forEach((o, pp) => {
                  that.allData.forEach((item) => {
                    if (item.id == o.id) {
                      if (type == "moving") {
                        item.x = groupValue[4] + o.left;
                        item.y = groupValue[5] + o.top;
                      } else if (type == "rotating") {
                        let x1 = groupValue[4] + o.left;
                        let y1 = groupValue[5] + o.top;
                        let gg = that.rotatoNi(
                          x1,
                          y1,
                          groupValue[4],
                          groupValue[5],
                          p.angle
                        );
                        item.x = gg.x;
                        item.y = gg.y;
                        item.rotationAngle = ((p.angle + o.angle) % 360)
                        o._objects[2].set({ angle: -((p.angle + o.angle) % 360) })
                      }
                    }
                  });
                });
              }
            }

          }
        }

        that.handleDataMovingRotating(type);
        canvas.renderAll();

        that.activeTpye = true;
        if (type == "moving") {
          that.movup = true;
        }
        if (type == "rotating") {
          that.rotup = true;
        }
      }
    },
    handleDataMovingRotating (type) {
      let that = this;
      let activeSelection = canvas.getActiveObject();
      let activeRectIds = [];
      if (activeSelection) {
        if (activeSelection.isCheckTo) {
          activeRectIds.push(activeSelection.id);
        } else {
          let objs = activeSelection._objects;
          objs.forEach((o) => {
            if (o.type == "group" && o.groupId != "box") {
              let items = o._objects;
              items.forEach((item) => {
                activeRectIds.push(item.id);
              });
            } else {
              activeRectIds.push(o.id);
            }
          });
        }
      }
      canvas.forEachObject(function (obj, i) {
        if (["triangle", "line"].indexOf(obj.type) != -1) {
          if (
            (obj.type == "line" && obj.startId && obj.strokeDashArray.length == 0) ||
            obj.type == "triangle"
          ) {
            let startId = obj.startId;
            let endId = obj.endId;
            if (
              activeRectIds.indexOf(startId) >= 0 ||
              activeRectIds.indexOf(endId) >= 0
            ) {
              let [x1, y1, x2, y2] = [0, 0, 0, 0];
              that.allData.forEach((data) => {
                if (data.id == startId) {
                  [x1, y1] = [data.x, data.y];
                } else if (data.id == endId) {
                  [x2, y2] = [data.x, data.y];
                }
              });

              if (obj.type == "line") {
                obj
                  .set({
                    x1,
                    y1,
                    x2,
                    y2,
                  })
                  .setCoords();
              } else if (obj.type == "triangle") {
                obj
                  .set({
                    angle: that.getAngle(x1, y1, (x1 + x2) / 2, (y1 + y2) / 2),
                    left: (x1 + x2) / 2,
                    top: (y1 + y2) / 2,
                  })
                  .setCoords();
              }
            }
          }
        }
      });
    },
    addbox () {
      let par = {
        width: 100,
        height: 100,
        type: 1,
        x: -100,
        y: -100,
        boxFileId: 1,
        index: 0,
        boxStatus: 1,
        rotationAngle: 0,
        visible: true,
      };
      this.plist.push(par)
      firstAdd = this.groupAdd(par, canvas);
      canvas.add(firstAdd);
      //firstAdd.scale(this.i).setCoords();
    },
    setzoom (num) {
      this.i = this.i + num
      if (this.i <= 4 || this.i >= 0.2) {

      }
      canvas.setZoom(this.i);
      /*  canvasDom.width = 600 * i
       canvasDom.height = 600 * i */
      canvas.setWidth(600 * this.i);
      canvas.setHeight(600 * this.i);
      canvas.renderAll();
      canvas.forEachObject((obj, j) => {
        if (obj.type == "group") {
        }
      });
    },
    //初始化fabric画布
    initCanvas () {
      let that = this;
      canvasDom = document.getElementById("can");
      canvasDom.width = 600
      canvasDom.height = 600
      canvas = new fabric.Canvas("can", { selection: true }); //selection 是否支持多选
      canvas.on({
        "object:moving": function (e) {
          var p = e.target;
          that.movAndrotat(p, "moving");
        },
        "object:rotating": function (e) {
          var p = e.target;
          that.movAndrotat(p, "rotating");
        },
        "object:scaling": function (e) {

        },
        "mouse:down": function (e) {
          console.log('点击当前箱体', e)
          if (that.plist.length > 0) {
            that.plist[0].x = e.pointer.x
            that.plist[0].y = e.pointer.y
            firstAdd = that.groupAdd(that.plist, canvas);
            canvas.add(firstAdd);
            that.allData.push(that.plist[0])
            that.plist = []
          }
        },
        "mouse:up": function (e) { },
        // 点击空白部分长按拖动箱体区域
        "mouse:move": function (e) {
          let x = e.pointer.x;
          let y = e.pointer.y;
          that.pointer = e.pointer
          if (firstAdd) {
            firstAdd.set({ visible: true, left: x, top: y }).setCoords();
            canvas.renderAll();
          }
          return
        },
        // 鼠标滚动画布放大缩小
        "mouse:wheel": function (e) { },
        "mouse:over": function (e) { },
        //离开画布
        "mouse:out": function (e) {
          that.pointer = {
            x: 0,
            y: 0
          }
        },
        "selection:created": function (e) { },
        "before:selection:cleared": function (e) { },
      });
      fabric.Group.prototype.hasControls = true;
      canvas.selectionLineWidth = 3;
      fabric.Group.prototype.setControlsVisibility({
        mt: false,
        mb: false,
        bl: false,
        br: false,
        tl: false,
        tr: false,
        mr: false,
        ml: false,
        mtr: true,
      });
      canvas.preserveObjectStacking = false;
    },
    //查询箱体
    getboxList (isflag, callback) {
      let res = {
        "status": 200, "msg": "SUCCESS", "obj": [{
          "outputId": 1, "slotId": 1, "portId": 2, "list": [
            {
              boxFileId: 1,
              boxStatus: 1,
              height: 100,
              index: 1,
              rotationAngle: 0,
              type: 1,
              visible: true,
              width: 100,
              x: 150,
              id: 1,
              y: 200,
              groupId: "box",
              groupIdd: "5",
              networkPort: 2
            }, {
              boxFileId: 1,
              boxStatus: 1,
              height: 100,
              index: 2,
              rotationAngle: 0,
              type: 1,
              visible: true,
              width: 100,
              x: 250,
              y: 300,
              id: 2,
              groupId: "box",
              groupIdd: "5",
              networkPort: 2
            }, {
              boxFileId: 1,
              boxStatus: 1,
              height: 100,
              index: 3,
              rotationAngle: 0,
              type: 1,
              visible: true,
              width: 100,
              x: 380,
              y: 300,
              id: 3,
              networkPort: 2
            }
          ],
        },
        ], "total": 0
      }
      let arr = [];
      if (res.obj && res.obj.length > 0) {
        let array = res.obj;
        for (let i = 0; i < array.length; i++) {
          let item = array[i].list;
          for (let index = 0; index < item.length; index++) {
            item[index].slotId = array[i].slotId;
            arr.push(item[index]);
          }
        }
      }
      this.allData = arr;

      this.handleData2("init");
      for (let i = 0; i < arr.length; i++) {
        let ltgo = this.groupAdd(arr[i], canvas)
        canvas.add(ltgo);
        ltgo.scale(this.i).setCoords();
      }
      this.initGroup();
      callback && callback();
      return arr;
    },
    initGroup () {
      let boxes = [];
      let objs = canvas.getObjects();
      objs.map((item) => {
        if (item.groupIdd) {
          boxes.push(item);
        }
      });

      if (boxes.length) {
        var sel = new fabric.ActiveSelection(boxes, {
          canvas: canvas,
        });
        canvas.setActiveObject(sel);
        let group = canvas.getActiveObject().toGroup({});
        group.set({
          id: boxes.groupIdd,
        });
        canvas.requestRenderAll();
      }
    },
    //重新连线
    handleData2 (type) {
      //获取所有箱体数据处理 start
      canvas.forEachObject(function (obj, i) {
        if (["triangle", "line"].indexOf(obj.type) != -1) {
          canvas.remove(obj);
        }
      });
      var typeWk = [];
      this.allData.forEach((item) => {
        if (typeWk.indexOf(item.networkPort) == -1) {
          typeWk.push(item.networkPort);
        }
      });
      typeWk.forEach((item) => {
        var newarr = this.allData.filter(function (obj) {
          return obj.networkPort == item;
        });
        newarr = newarr.sort((a, b) => {
          return a.index - b.index;
        });
        newarr.forEach((m, n) => {
          m.index = n + 1;
        });
        let result = [];
        newarr.forEach((item) => {
          result.push(item);
        });
        this.initLines(result, canvas, type);
      });
    },

    //初始化生成线段
    initLines (list, canvas, type) {
      list = list.sort((a, b) => {
        return a.index - b.index;
      });
      for (var i = 0; i < list.length; i++) {
        var dot = list[i];
        var todot = list[i];
        if (parseInt(i) + 1 < list.length) {
          todot = list[parseInt(i) + 1];
        }
        if (parseInt(i) + 1 != list.length) {
          lineArr["AAA" + i] = this.makeLine(
            [dot.x, dot.y, todot.x, todot.y],
            list[i],
            [],
            "",
            dot.id ? dot.id : dot.boxId,
            todot.id ? todot.id : todot.boxId
          );
          canvas.add(lineArr["AAA" + i]);
          triangle["AAA" + i] = this.createArrowHead(
            dot.x,
            dot.y,
            (todot.x + dot.x) / 2,
            (todot.y + dot.y) / 2,
            10,
            10,
            list[i],
            type,
            dot.id ? dot.id : dot.boxId,
            todot.id ? todot.id : todot.boxId
          );
          canvas.add(triangle["AAA" + i]);
        }
      }
    },
    rotatoNi (x1, y1, x2, y2, reg) {
      // 在平面坐标上，任意点P(x1,y1)，绕一个坐标点Q(x2,y2)逆时针旋转θ角度后,新的坐标设为(x, y)的计算公式：
      // x= (x1 - x2)*cos(θ) - (y1 - y2)*sin(θ) + x2 ;
      // y= (x1 - x2)*sin(θ) + (y1 - y2)*cos(θ) + y2 ;
      let x = parseInt((x1 - x2) * Math.cos(Math.PI * reg / 180) - (y1 - y2) * Math.sin(Math.PI * reg / 180) + x2);
      let y = parseInt((x1 - x2) * Math.sin(Math.PI * reg / 180) + (y1 - y2) * Math.cos(Math.PI * reg / 180) + y2);
      return { x: x, y: y } //旋转后的坐标(x,y)
    },
    //左上角直角三角形
    creatPath (list, i, type) {
      //console.log('当前箱体左上角直角三角形数据', list, i, type)
      let wc = 0
      let x1 = list.x - list.width / 2 + wc
      let y1 = list.y - list.height / 2 + wc
      let prot = this.rotatoNi(x1, y1, list.x, list.y, list.rotationAngle)
      let x = prot.x
      let y = prot.y
      let u = 'M ' + x + ' ' + y + ' L ' + (x + 10) + ' ' + y + ' L ' + x + ' ' + (y + 10) + ' z'
      var path = new fabric.Path(u);
      //console.log(i + '三角形的坐标点', x, y)
      return path.set({
        angle: list.rotationAngle,
        left: x, //距离画布上边的距离
        top: y, //距离画布左侧的距离，单位是像素
        fill: '#FFFFFF', //填充的颜色
        selectable: false,
        stroke: '#FFFFFF', // 边框颜色
        opacity: 0.3,
        strokeWidth: 1,
        id: list.id,
        networkPort: list.networkPort,
        operateType: type,
      });
    },
    //创建中心点
    makeCircle2 (list) {
      var circle = new fabric.Circle({
        originX: "center",
        originY: "center",
        left: list.x, //距离画布上边的距离
        top: list.y, //距离画布左侧的距离，单位是像素
        radius: 4, //圆形半径
        fill: '#000', //填充的颜色
        stroke: this.setColor[list.networkPort] ? this.setColor[list.networkPort] : '#fff', // 边框颜色
        selectable: false,
        evented: false,
        id: list.id,
        networkPort: list.networkPort,
        index: list.index,
        hoverCursor: "pointer",//鼠标指针方式
        strokeWidth: 2 // 边框大小
      });
      return circle
    },
    //创建文本
    makeText (t, list, i, type) {
      let x1 = list.x - list.width / 2
      let y1 = list.y - list.height / 2
      let prot = this.rotatoNi(x1, y1, list.x, list.y, list.rotationAngle)
      let x = (prot.x - list.x) / 1.5 + list.x
      let y = (prot.y - list.y) / 1.5 + list.y
      //console.log(i + '文本的坐标点', x, y)      
      var textBox = new fabric.Textbox(t, {
        /* originX: "left",
        originY: "top", */
        originX: "center",
        originY: "center",
        left: x,
        top: y,
        centeredRotation: true, //中心旋转
        fontSize: 12,
        selectable: false,
        evented: false,
        networkPort: list.networkPort,
        fill: '#fff',
        id: list.id,
        operateType: type,
      });
      return textBox
    },
    //创建矩形
    makeRect (left, top, ids, width, height, angle, groupId, boxId, boxFileId) {
      let rect = new fabric.Rect({
        //rx: 4, //圆角半径
        // ry: 4, //圆角半径
        angle: angle,
        left: left,
        top: top,
        originX: "center", //相对于坐标点位置
        originY: "center", //相对于坐标点位置
        width: width,
        height: height,
        //hoverCursor: "pointer",

        fill: "rgba(0,153,255,0.20)",//"#1C445E",
        stroke: '#136094', // 边框颜色
        strokeWidth: 2, // 边框大小

        borderColor: "#0099FF", //选中边框色
        cornerStyle: "circle", // 手柄形状 正方形 rect||圆 circle
        cornerColor: "#0099FF", //手柄背景色
        cornerStrokeColor: "#0099FF", //手柄框边框

        hasControls: true, //手柄
        hasBorders: true, //手柄线
        visible: true, //是否可见
        selectable: true, //是否可选择的对象
        evented: true, //是否拖动
        centeredRotation: true, //中心旋转
        centeredScaling: true, //居中缩放
        transparentCorners: false, //选中框透明角
        preserveObjectStacking: true,
        // opacity: 0.5,
        networkPort: ids.networkPort,//网口
        index: ids.index,//序号
        groupId: groupId,
        id: boxId ? boxId : null,
        boxFileId: boxFileId,
        //lockRotation: true,//锁定对象旋转
      });
      rect.setControlsVisibility({
        mt: false,
        mb: false,
        bl: false,
        br: false,
        tl: false,
        tr: false,
        mr: false,
        ml: false,
        mtr: true,
      });
      return rect;
    },
    //创建线段
    /* 
      coords 坐标
      list 当前对象
      arr虚线
      jt, 虚线箭头
    */
    makeLine (coords, list, arr, jt, startId, endId) {
      return new fabric.Line(coords, {
        fill: this.setColor[list && list.networkPort] ? this.setColor[list && list.networkPort] : '#fff',
        stroke: this.setColor[list && list.networkPort] ? this.setColor[list && list.networkPort] : '#fff',
        strokeWidth: 2,
        originX: "center",
        originY: "center",
        selectable: false,
        evented: false,
        hasControls: false,
        hasBorders: false,
        hasRotatingPoint: false,
        hoverCursor: "default",
        index: list.index,
        networkPort: list && list.networkPort,
        jt: jt || '',
        id: list && list.id,

        startId,
        endId,        //myJoker: arr,
        strokeDashArray: arr || [],
        huadongbs: list.huadongbs || false
      });
    },
    //创建连线上的实体三角形箭头
    createArrowHead (x1, y1, x2, y2, width, height, list, type, startId, endId) {
      return new fabric.Triangle({
        angle: this.getAngle(x1, y1, x2, y2),
        fill: "white",
        top: y2,
        left: x2,
        width: width,
        height: height,
        originX: "center",
        originY: "center",
        selectable: false,
        evented: false,
        id: list.id,
        index: list.index,
        networkPort: list.networkPort,
        startId,
        endId,
        huadongbs: list.huadongbs || false
      });
    },
    /* 绘制箭头函数 ------->--------
      fromX, fromY：起点坐标（也可以换成p1，只不过它是一个数组）
      toX, toY：终点坐标 (也可以换成p2，只不过它是一个数组)
      theta：三角斜边一直线夹角
      headlen：三角斜边长度
      width：箭头线宽度
      color：箭头颜色 */
    drawArrow (canvas, fromX, fromY, toX, toY, theta, headlen, width, color) {
      width = 1;//箭头宽度设置为1
      var theta = theta || 30,
        headlen = headlen || 10,
        width = width || 1,
        color = color || '#000',
        angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
        angle1 = (angle + theta) * Math.PI / 180,
        angle2 = (angle - theta) * Math.PI / 180,
        topX = headlen * Math.cos(angle1),
        topY = headlen * Math.sin(angle1),
        botX = headlen * Math.cos(angle2),
        botY = headlen * Math.sin(angle2);
      var arrowX, arrowY;
      arrowX = toX + topX; //箭头结尾左边坐标
      arrowY = toY + topY;
      canvas.add(this.makeLine([arrowX, arrowY, toX, toY], '', [], 'jt'));
      //ctx.moveTo(arrowX, arrowY);
      //ctx.lineTo(toX, toY); //箭头开始坐标
      arrowX = toX + botX; //箭头结尾右边坐标
      arrowY = toY + botY;
      canvas.add(this.makeLine([arrowX, arrowY, toX, toY], '', [], 'jt'));
      // ctx.lineTo(arrowX, arrowY);
    },
    //三角形角度计算
    getAngle (x1, y1, x2, y2) {
      var dx = x2 - x1,
        dy = y2 - y1,
        angle = Math.atan2(dy, dx);
      angle *= 180 / Math.PI;
      angle += 90;
      return angle;
    },
    //改变画布大小
    zoomIt (factor) { // factor： 比例
      let cWidth = canvas.width;
      canvas.setWidth(cWidth * factor);
      canvas.setHeight(cWidth * factor);
      if (canvas.backgroundImage) {
        var bi = canvas.backgroundImage;
        bi.width = bi.width * factor;
        bi.height = bi.height * factor;
      }
      var objects = canvas.getObjects();
      for (var i in objects) {
        var scaleX = objects[i].scaleX;
        var scaleY = objects[i].scaleY;
        var left = objects[i].left;
        var top = objects[i].top;

        var tempScaleX = scaleX * factor;
        var tempScaleY = scaleY * factor;
        var tempLeft = left * factor;
        var tempTop = top * factor;

        objects[i].scaleX = tempScaleX;
        objects[i].scaleY = tempScaleY;
        objects[i].left = tempLeft;
        objects[i].top = tempTop;

        objects[i].setCoords();
      }
      canvas.renderAll();
      canvas.calcOffset();
    },
    //阻止右键默认行为
    preventYj () {
      $(document).contextmenu(function (ev) {
        if (ev.preventDefault) {
          ev.preventDefault();
        } else {
          window.event.returnValue = false;
        }
      })
    },
    getTanDeg (tan) {
      var result = Math.atan(tan) / (Math.PI / 180);
      result = parseInt(result);
      return result;
    },
    //自定义修改序号重新排序
    setArrIndex (str, end, list) {
      for (var i = 0; i < list.length; i++) {
        if (end.index > list[i].index && list[i].index > str.index) {
          list[i].index = list[i].index + 1
        }
        if (end.id == list[i].id) {
          list[i].index = str.index + 1
        }
      }
      list = list.sort((a, b) => {
        return a.index - b.index
      });
      return list;
    },
    //自定义修改序号重新排序
    setArrIndex2 (str, end, list) {
      //序号2和4 实际就是3和4调换位置
      if (str.index < end.index) {
        list[str.index] = list.splice(end.index - 1, 1, list[str.index])[0];
        for (var i = 0; i < list.length; i++) {
          list[i].index = i + 1
        }
      } else {
        list[end.index - 1].index = str.index
        for (var i = 0; i < list.length; i++) {
          if (str.index > list[i].index && list[i].index > end.index) {
            list[i].index = list[i].index - 1
          }
        }
        list[str.index - 1].index = str.index - 1
        list = list.sort((a, b) => {
          return a.index - b.index
        });
      }
      return list;
    },
    compare (pro) {
      return function (obj1, obj2) {
        var val1 = obj1[pro];
        var val2 = obj2[pro];
        if (val1 < val2) { //正序
          return 1;
        } else if (val1 > val2) {
          return -1;
        } else {
          return 0;
        }
      }
    },
    isMouseoeut (x, y) {
      let that = this
      var a = -15
      let cdiv = document.getElementById("canvasZone")
      var X1 = that.getOffsetLeft(cdiv) - a
      var Y1 = that.getOffsetTop(cdiv) - a
      var X2 = that.getOffsetLeft(cdiv) + cdiv.offsetWidth + a
      var Y2 = that.getOffsetTop(cdiv) + cdiv.offsetHeight + a
      if (x < X2 && x > X1 && y < Y2 && y > Y1) {
        return true
      } else {
        return false
      }
    },
    groupAdd (list, canvas) {
      //console.log('新式分组')
      /* x.y表示左上角点 */
      var x1 = -50, y1 = -50, width = 100, height = 100;
      let x = list.x - list.width / 2
      let y = list.y - list.height / 2
      let u = 'M ' + x + ' ' + y + ' L ' + (x + 10) + ' ' + y + ' L ' + x + ' ' + (y + 10) + ' z'
      var path2 = new fabric.Path(u);
      //左上角三角形
      path2.set({
        left: this.face == true ? (-(list.width / 2)) : (list.width / 2),
        left: this.showFace == true ? (-(list.width / 2)) : (list.width / 2), top: -(list.height / 2),
        fill: '#dadcdb', //填充的颜色
        opacity: list.boxStatus == 1 ? 0.3 : 1,
        strokeWidth: 1,
        angle: this.face == true ? 0 : 90,
        angle: this.showFace == true ? 0 : 90,
      })
      var t = list.index == 0 ? '' : (list.portId ? list.portId : 0) + "_" + list.index
      //文字
      // console.log(this.face);
      var text2 = new fabric.Text(t, {
        angle: -list.rotationAngle,
        fontSize: 12,
        originX: 'center',
        originY: 'center',
        fill: '#fff',
        left: this.face == true ? (-(list.width / 2) + 20) : (list.width / 2 - 20),
        left: this.showFace == true ? (-(list.width / 2) + 20) : (list.width / 2 - 20),
        top: -(list.height / 2) + 20,
      });
      //中心点
      var circle2 = new fabric.Circle({
        originX: "center",
        originY: "center",
        radius: 4, //圆形半径
        fill: '#000', //填充的颜色
        stroke: this.setColor[list.networkPort] ? this.setColor[list.networkPort] : '#fff', // 边框颜色
        selectable: false,
        evented: false,
        hoverCursor: "pointer",//鼠标指针方式
        strokeWidth: 2 // 边框大小
      });
      //矩形
      var rect2 = new fabric.Rect({
        width: list.width,
        height: list.height,
        originX: 'center',
        originY: 'center',

        fill: "rgba(0,153,255,0.20)",//"#1C445E",
        stroke: '#136094', // 边框颜色
        strokeWidth: 2, // 边框大小
        borderColor: "#0099FF", //选中边框色
        cornerStyle: "circle", // 手柄形状 正方形 rect||圆 circle
        cornerColor: "#0099FF", //手柄背景色
        cornerStrokeColor: "#0099FF", //手柄框边框
        centeredRotation: true,
        portId: list.portId,
        slotId: list.slotId,
      });
      var group2 = new fabric.Group([rect2, circle2, text2, path2], {
        left: list.x,
        top: list.y,
        width: list.width,
        height: list.height,
        originX: 'center',
        originY: 'center',
        isCheckTo: true, //有这个字段表示单选，没有多选
        networkPort: list.networkPort,//网口
        index: list.index,//序号
        groupId: 'box',
        groupIdd: list.groupId,
        id: list.id,
        angle: list.rotationAngle,
        centeredRotation: true,

        fill: "#0099FF",//"#1C445E",
        stroke: '#0099FF', // 边框颜色
        strokeWidth: 2, // 边框大小

        borderColor: "#0099FF", //选中边框色
        cornerStyle: "circle", // 手柄形状 正方形 rect||圆 circle
        cornerColor: "#0099FF", //手柄背景色
        cornerStrokeColor: "#0099FF", //手柄框边框
        huadongbs: list.huadongbs || false,
        boxFileId: list.boxFileId,
        portId: list.portId,
        slotId: list.slotId,
        // scaleX: this.i,
        // scaleY: this.i
      });
      return group2
    }
  }
};
</script>

<style scoped>
  .btn {
    float: left;
    margin: 15px;
    cursor: pointer;
  }
</style>

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

粘贴代码文本（请勿用截图）

你期待的结果是什么？实际看到的错误信息又是什么？