fabricjs 矩形拖动效果+myCanvas.vue

<script>
export default {
  data () {
    return {
      setColor: ['#FF0000', '#F2C94C', '#EBFF00', '#9B51E0', '#6FCF97',
        '#F2F2F2', '#00FFF0', '#33FF00', '#00A3FF', '#FF00C7', '#FF7A00', '#0075FF']
    }
  },
  mounted () {
  },
  methods: {
    oCoords (w, h, x2, y2, reg) {
      return {
        tl: this.rotatoNi(x2 - w / 2, y2 - h / 2, x2, y2, reg),
        tr: this.rotatoNi(x2 + w / 2, y2 - h / 2, x2, y2, reg),
        bl: this.rotatoNi(x2 - w / 2, y2 + h / 2, x2, y2, reg),
        br: this.rotatoNi(x2 + w / 2, y2 + h / 2, x2, y2, reg)
      }
    },
    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)
    },
    rotatoNi2 (x1, y1, x2, y2, reg) {
      let x = ((x1 - x2) * Math.cos(Math.PI * reg / 180) - (y1 - y2) * Math.sin(Math.PI * reg / 180) + x2);
      let y = ((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.portId % 12] ? this.setColor[list.portId % 12] : '#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) {
      //console.log('list.networkPort', list.networkPort)
      return new fabric.Line(coords, {
        fill: this.setColor[list && list.portId % 12] ? this.setColor[list && list.portId % 12] : '#fff',
        stroke: this.setColor[list && list.portId % 12] ? this.setColor[list && list.portId % 12] : '#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.slotId ? list.slotId : 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.portId] ? this.setColor[list.portId] : '#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,
        isSwitch: list.isSwitch,
      });
      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,
        isSwitch: list.isSwitch,
        //scaleX: this.canvasZoom,
        //scaleY: this.canvasZoom
      });
      return group2
    }
  },
};
</script>