javascript - 如何在两个不总是矩形的元素之间画一条线（路径，svg）

Question

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

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

但是，如果节点中有自定义的东西，使它们成为非矩形的，例如带有 的 divborder-radius: 50%呢？

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

在这个例子中：

如何计算箭头位置？

标签： javascripthtmlsvg

Answer 1

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