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

【问题标题】：How to create a connecting line between two asymmetrical shapes in fabric.js?如何在 fabric.js 中创建两个不对称形状之间的连接线？
【发布时间】：2023-02-24 04:13:50
【问题描述】：

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

问题:- 我正在获取 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())});

Demo

【问题讨论】：

标签： fabricjs fabric

【解决方案1】：

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

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

如果您需要在边界上的某个点专门连接，则需要使用 Polygons ( http://fabricjs.com/docs/fabric.Polygon.html )，您可以在创建它时定义这些点。然后用向量找到边缘的确切位置。它更复杂，但可以实现。如果你选择这条路，我写了一些关于 fabricjs 的文章，特别是我写了一篇介绍向量的概念及其在 fabricjs 中的使用，也许可以帮助你：https://medium.com/@luizzappa/display-angle-while-rotating-an-object-in-fabric-js-1156370e2b77

【讨论】：