如何在fabric.js中创建两个不对称形状之间的连接线？

Question

要求：- 让我们举个例子，我们有两个三角形或任何其他形状，我想要两个用一条线连接它们 -

问题：-我得到了boundingRect坐标，但线条未正确绘制。下图中的线条是从第一个对象的MR控制到第二个对象的ML控制绘制的，并且没有接触形状的顶点。 .

我想获取第一张图像中形状的坐标，即 (x1,y1),(x2,y2),(x3,y3),(x4,y4) 。 假设获取这些点后我可以使用计算来找到我的目标点。 任何其他解决方案或想法将受到高度赞赏。

面料版本 - 面料 5

const fc = new fabric.Canvas("c");

const triangle1Options = {
    stroke: 'black',
    strokeWidth: 2,
    fill: 'red',
    left: 10,
    top: 10,
    width: 100,
    height: 100,
}


let triangle1 = new fabric.Triangle(triangle1Options);

fc.add(triangle1);

// Get coords of triangle
/* The below syntax returns => {
  height: 102,
  left: 10,
  top: 10,
  width: 102
}
This is the bounding rect of triangle. How to get actual coordinates of the triangle. */
fc.on('selection:created', event => {console.log(event.target.getBoundingRect())});

演示

Answer 1

为什么不将线连接到每个对象的中心点？在堆栈上，将线放在它们后面，这样它在视觉上看起来就像连接笔画：

我在这里创建了一个示例：https://codesandbox.io/s/fabricjs-connect-line-example-hlco78

如果您需要在边界上的某个点进行专门连接，则需要使用

Polygons

( http://fabricjs.com/docs/fabric.Polygon.html )，您可以在以下情况下定义点：创造它。然后找到相对于画布的顶点位置。有了这个，您可以演变为选择顶点之间的中间点（它将是连接线的起点/终点）。它更复杂，但可以实现。如果你选择这条路，我会写一些关于fabricjs的文章，特别是我写了一篇，它详细解释了如何找到可能可以帮助你的对象的顶点。