所以我正在使用 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)
];
}
我试图想出一个类似的功能,但无法想出一个好的解决方案或找到一个好的例子。正如您在图像中看到的,我刚刚在函数中返回了 from x 和 y 以及 to x 和 y,因此这些线条将放置在每个正方形的左上角。
该函数的目标应该是将线条放在正方形边的中间和正方形的正确边上。因此,当 to 方块放在下方时,它应该出现在底部。
因此,如果有人有解决方案,我们将不胜感激。