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

Question

我在使用 konva js 时遇到问题。圆圈之间的线不接触它们，圆圈和线之间的差距太大了。

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

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

Answer 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

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

Konva - line doesnt touch the circle - gap between circle and line

javascript

css

konvajs