How to draw a line (path, svg) between two elements that aren't always rectangular

Question

I'm making a diagramming library in Blazor which uses HTML nodes and SVG links. I am wondering how can I draw links between two nodes when they aren't always rectangular.

All the solutions I find are based on nodes that are rectangles/squares, where it's easy to draw a link on the borders (or even the center, but only works for direct links).

But what about nodes that have custom stuff in them that makes them non rectangular, for example a div with border-radius: 50% ?

One possible solution is to draw the lines from/to the center of the elements, but that would only work with simple lines, curved lines would look weird.

In this example:

How does arrow position get calculated?

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 ).. 使用数学只是计算元素的连接点，计算连接点的数学复杂性在于元素的形状，对于每个不同的形状，您需要不同的计算方法如果不在中心