Question

我想用连接器连接两个fabric.js对象。我怎样才能做到这一点？例如，我有两个这样的结构对象：

var canvas = new fabric.Canvas("c");

$("#rect").on("click", function (e) {
    rect = new fabric.Rect({
        left: 40,
        top: 40,
        width: 50,
        height: 50,
        fill: "cornflowerblue",
        stroke: "cornflowerblue",

    });
    canvas.add(rect);
});

$("#rect").on("click", function (e) {
    rect = new fabric.Rect({
        left: 40,
        top: 40,
        width: 50,
        height: 50,
        fill: "cornflowerblue",
        stroke: "cornflowerblue",

    });
    canvas.add(rect);
});

我有一个名为“连接器”的按钮单击按钮时，它应该允许我单击任何对象，以开始从所选对象到另一对象的直线。

我没有使用角度或反应。我在jQuery上执行此操作。我用谷歌搜索，但受够了。在这里，我正在寻找逐步指南。

Answer 1

  const rectz = rect.getPointByOrigin('center')
  const recty = rect1.getPointByOrigin('center')
  const connector = new fabric.Line(
    [rectz.x, rectz.y, recty.x, recty.y],
    {
      stroke: '#8470ff',
      strokeWidth: 3,
      lockScalingX: true,
      lockScalingY: true,
      lockRotation: false,
      hasControls: false,
      hasBorders: false,
      lockMovementX: true,
      lockMovementY: true
    }
  )



  rect.on('moving', function() {
  const connectPoint = this.getPointByOrigin('center')
     console.log(connectPoint,"centerpoint");
    connector.set({
      x1: connectPoint.x,
      y1: connectPoint.y
    })
  })

  rect1.on('moving', function() {
    const connectPoint1 = this.getPointByOrigin('center')
    connector.set({
      x2: connectPoint1.x,
      y2: connectPoint1.y
    })
  })

  canvas.add(connector,rect, rect1);

1。在定义第二个时，将rect命名为rect1。 jsfiddle link

如何通过连接器以编程方式连接Fabric.js对象

1 个答案: