Конва - линия не касается круга - зазор между кругом и линией

У меня проблема с konva js. Линия между кругами их не касается, зазор между кругом и линией слишком большой.

Кроме того, если расстояние между кругами маленькое или они просто накладываются друг на друга, линия слишком большая...

Детская площадка: https://codesandbox.io/s/morning-wood-douzq

т


javascript css konvajs
person Patrickkx    schedule 27.08.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

в функции 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

person lavrton    schedule 27.08.2019