Javascript 直线和路径之间的交点/多边形Fabric.js

我们正在使用fabric.js在javascript上创建一个小应用程序，我们将形状放置在画布上，并用线条连接它们。有不同的形状，有些是用fabic.js创建的，有些是用。直线从一个中心到另一个中心，并在移动任一对象时正确更新

这些线的末端也有一个小箭头。但是我想把这个形状放在直线与物体相交的点上，这样它总是可见的。我尝试过fabric.js交集函数，但除了知道两个对象是否相交（如下图所示）外，我还无法理解它们是如何工作的

所以问题是：我怎样才能找到形状与直线相交的点

这是我们对其工作原理的概述：

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

function addChildMoveLine(options) {
  var object = options.target;
  var objectCenter = object.getCenterPoint();

  if (object.addChild) {
    if (object.addChild.from) {
      object.addChild.from.forEach(function(line) {
        var currentLineWidth = line.getStrokeWidth();
        line.set({
          'x1': objectCenter.x - currentLineWidth / 2,
          'y1': objectCenter.y - currentLineWidth / 2
        });
      });
      // Here we want to calculate the intersection between the object and the line.
    }
    if (object.addChild.to) {
      object.addChild.to.forEach(function(line) {
        var currentLineWidth = line.getStrokeWidth();
        line.set({
          'x2': objectCenter.x - currentLineWidth / 2,
          'y2': objectCenter.y - currentLineWidth / 2
        });
      });
      // Calculate the intersection on the other end.
    }
  }

  canvas.renderAll();
}

function addItem(x, y) {
  var circle = new fabric.Circle({
    radius: 50,
    fill: "#faa",
    scaleY: 0.5,
    originX: 'center',
    originY: 'center'
  });

  var text = new fabric.IText("text", {
    fontSize: 15,
    originX: 'center',
    originY: 'center'
  });

  var group = new fabric.Group([circle, text], {
    // any group attributes here
    left: x,
    top: y
  });

  canvas.add(group);
  canvas.renderAll();

  return group;
}

function makeLine(coords) {
  var line = new fabric.Line(coords, {
    fill: "#000",
    stroke:"#000",
    strokeWidth: 3,
    selectable: true
  });

  fromObject.addChild = {
    // this retains the existing arrays (if there were any)
    from: (fromObject.addChild && fromObject.addChild.from) || [],
    to: (fromObject.addChild && fromObject.addChild.to)
  }
  fromObject.addChild.from.push(line);
  // to-object:
  toObject.addChild = {
    from: (toObject.addChild && toObject.addChild.from),
    to: (toObject.addChild && toObject.addChild.to) || []
  }
  toObject.addChild.to.push(line);

  return line;
}

canvas.on('object:moving', function(e){
  addChildMoveLine(e);
})

var fromObject = addItem(50, 100);
var toObject = addItem(300, 100);

var from = fromObject.getCenterPoint();
var to = toObject.getCenterPoint();
var coords = [from.x, from.y - 3 / 2, to.x, to.y - 3 / 2];
var line = makeLine(coords);
canvas.add(line);
line.sendToBack();

在exxampl工作的情况下

任何帮助都将不胜感激

---

编辑：澄清问题并添加代码和JSfiddle。

您的问题是什么，代码在哪里？添加了一些代码并澄清了问题，谢谢@MauroAguilar您的问题是什么，代码在哪里？添加了一些代码并澄清了问题，谢谢@MauroAguilar