Javascript 用一条线连接两个圆（使用DOM元素）

我正在努力用一条线连接两个圆。我正在使用图书馆

a、 k.a.“两个球，一条线。”

---

问题 线条的角度和长度正确，但位置错误

---

第一次尝试 重要部分应为第114-116行：

connection.origin = [.5, .5];
connection.align = [.5, .5];
connection.body.setPosition([
    Math.min(sourcePos.x, targetPos.x),
    Math.min(sourcePos.y, targetPos.y)
]);

显然我的数学有问题。玩弄这些价值观给了我各种各样的结果，但没有什么是接近正确的

---

预期解决方案 （1） 最小的解决方案是将圆的中心与直线连接起来

（2） 更好的解决方案是一条只接触两个圆表面的线，而不是到圆心

（3） 理想的解决方案是在线条的每一端都有箭头，看起来像一个有向图。

这就解决了这个问题：

connection.body.setPosition([
sourcePos.x*Math.cos（角度）+sourcePos.y*Math.sin（角度），
sourcePos.x*Math.sin（-angle）+sourcePos.y*Math.cos（angle）
]);

• 您的段是由其在

  源

  中的外向性以及到

  目标

  的角度和距离定义的，因此您必须将其原点设置为

  源

• 旋转似乎不仅旋转对象，而且还围绕原点旋转坐标，因此我将它们旋转了

  -角度

  以进行补偿

可能有一种更为著名的方法（也许你可以在设置位置之前让它旋转，或者让位置为0,0，并在转换中添加坐标作为平移）

---

为了得到更好的解决方案，主要还是数学，您可以保留相同的代码，但是

• 使用

  r

  源球的半径，将

  [r*distX/distance，r*distY/distance]

  移到段的坐标处，使其与球的外部接触
• 从距离中删除两个球的半径

有了这些，我们可以：

var distX=sourcePos.x-targetPos.x；
var distY=源位置y-目标位置y；
var norm=Math.sqrt（distX*distX+distY*distY）；
var距离=norm-（source.size[0]+target.size[0]）/2；
变量角度=-Math.atan2（-distY，distX）；
连接角度=角度；
connection.size=[距离，2，0]；
connection.align=[.5,5]；
connection.origin=[.5,5]；
var posX=sourcePos.x—source.size[0]/2*（distX/norm）；
var posY=sourcePos.y—source.size[0]/2*（distY/norm）；
连接.body.setPosition([
posX*Math.cos（角度）+posY*Math.sin（角度），
posX*Math.sin（-angle）+posY*Math.cos（angle）
]);

此分叉上的结果：

---

我认为当球快速移动时，线的长度变短是一个时间问题。最有可能的情况是，当球的中心尚未为该帧更新时，计算分段的长度和位置。

在渲染周期后一步的情况下，您的点似乎是正确的。不过，你的解释对我帮助很大。非常感谢。要解决渲染步骤问题，只需将

prerender

替换为

postrender