用一条线连接两个圆（带有 DOM 元素）

Question

我正在努力用一条线连接两个圆圈。我正在使用famo.us 库。

DEMO on Codepen

又名。 “两个球，一条线。”

---

问题

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

---

第一次尝试

重要的部分应该是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) 理想的解决方案是在线条的每一端都有箭头，看起来像有向图。

Answer 1

这解决了它：

connection.body.setPosition([
    sourcePos.x * Math.cos(angle) + sourcePos.y * Math.sin(angle),
    sourcePos.x * Math.sin(-angle)+ sourcePos.y * Math.cos(angle)
]);

• 您的线段由其在source 中的边缘以及到target 的角度和距离定义，因此您必须将其原点设置为source 的原点
• 旋转似乎不仅旋转了物体，还旋转了围绕原点的坐标，所以我将它们旋转了-angle来补偿。

可能有更多的famo.usesque 方式来做到这一点（也许你可以在设置位置之前让它旋转，或者让位置为 0,0 并在转换中添加坐标作为平移）。

---

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

• 以rsource球的半径，将[r * distX / distance, r * distY / distance]移到该段的坐标处，使其与球的外部接触
• 从远处移除两个球的半径

这样，我们得到：

var distX = sourcePos.x - targetPos.x;
var distY = sourcePos.y - targetPos.y;
var norm = Math.sqrt(distX * distX + distY * distY);
var distance = norm - (source.size[0]+target.size[0])/2;
var angle = -Math.atan2(-distY, distX);
connection.angle = angle;
connection.size = [distance, 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);
connection.body.setPosition([
  posX * Math.cos(angle) + posY * Math.sin(angle),
  posX * Math.sin(-angle)+ posY * Math.cos(angle)
]);

这个分叉的结果：http://codepen.io/anon/pen/qEjPLg

我认为当球跑得快时线的长度会偏离这一事实是一个时间问题。很可能您在球的中心尚未针对该帧更新的时刻计算片段的长度和位置。