Konva - 线不接触圆 - 圆与线之间的间隙

【问题标题】：Konva - line doesnt touch the circle - gap between circle and lineKonva - 线不接触圆 - 圆与线之间的间隙
【发布时间】：2019-08-27 10:13:21
【问题描述】：

我对 konva js 有疑问。圆圈之间的线没有碰到它们，圆圈和线之间的差距太大。

此外，如果圆圈之间的间隙很小或者它们刚好在彼此的顶部，则线太大...

游乐场： https://codesandbox.io/s/morning-wood-douzq

【问题讨论】：

标签： javascript css konvajs

【解决方案1】：

在getConnectorPoints() 函数中，您有radius 变量，它定义了圆和线之间的偏移量。只要让它等于圆的半径，你就会得到预期的结果：

const RADIUS = 10;

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

  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)
  ];
}

https://codesandbox.io/s/connected-dots-demo-1kkqc

【讨论】：