KonvaJS连接正方形和正确的线位置？

Question

因此，我正在使用KonvaJS和KonvaReact构建UML绘图工具，为此我需要将形状与线连接。我在网站上看到了有关连接对象https://konvajs.org/docs/sandbox/Connected_Objects.html的教程。

他们使用函数get_connecter_points，该函数根据圆上的弧度从直线计算位置。

function getConnectorPoints(from, to) {
        const dx = to.x - from.x;
        const dy = to.y - from.y;
        let angle = Math.atan2(-dy, dx);

        const radius = 50;

        return [
          from.x + -radius * Math.cos(angle + Math.PI),
          from.y + radius * Math.sin(angle + Math.PI),
          to.x + -radius * Math.cos(angle),
          to.y + radius * Math.sin(angle)
        ];
      }

我正在尝试提供一个类似函数，但是无法提供一个好的解决方案或找到一个好的例子。如您所见，在函数中，我只是从x和y返回到x和y，因此这些线将放置在每个正方形的左上角。

该函数的目标应该是将线条放置在正方形侧面的一半，并且位于正方形的正确侧面。因此，当将to square放在下面时，它应该出现在底部。

因此，如果有人有解决方案，请提供帮助。

Answer 1