Javascript 如何在两个非'；不一定是矩形的

我正在Blazor中制作一个图表库，它使用HTML节点和SVG链接。我想知道当两个节点不总是矩形时，如何在它们之间绘制链接

我找到的所有解决方案都基于矩形/正方形的节点，在这些节点上很容易在边界（甚至是中心）上绘制链接，但只适用于直接链接

但是，如果节点中有使其成为非矩形的自定义内容，例如边界半径为50%的div，该怎么办

一个可能的解决方案是从元素的中心画线，但这只适用于简单的线，曲线看起来很奇怪

在本例中：

---

如何计算箭头位置？

您需要一个容器，容器的宽度和高度，然后在容器内找到要连接的元素的x/y点，并绘制一条线到下一个元素的x/y点，可以使用元素的x、y、w、h计算x/y点，例如，x:100 y:100 w:100 h:100中心点位于x:150，y:150 x=x+（w/2），y=y+（h/2）。。使用数学只计算元素的连接点，计算连接点的数学复杂性在于元素的形状，对于每个不同的形状，如果不在中间，则需要不同的计算方法

大多数绘图程序在图标上都有各种预定义的连接点，即每个HTML节点都有元数据，这些元数据将告诉绘图程序从何处开始/结束它们。我的库有“端口”的概念，但是，当我看到其他库时，我发现它们在不需要预定义端口（例如JointJS）的情况下动态绘制链接，可能我错了。接触点是指两个元素之间距离最短的位置。我添加了一个示例@Msterjojo如何获得这些“接触点”在您的示例中，目标点对应于几何中心，但它在边界相交处停止，因此您必须计算该交叉点