Как сделать соединения объектов линиями и при этом, чтобы они были адаптивными?

Помогите сделать так, как показано на картинки и при этом, чтобы при изменении экрана, линии не съезжали с объекта, как у меня в скрипте(ниже) и так же когда экран совсем маленький они могли уходить вниз или вообще сделать их положение случайным.
5f316bb04345d290650371.png
Вот и скрипт, да знаю, что можно было создать один элемент в html, а потом изменять ему значения, но я хотел по максимуму автоматизировать процесс через js.
https://codepen.io/Persovt/pen/WNwvmaO
  • Вопрос задан
  • 242 просмотра
Решения вопроса 1
@persovt Автор вопроса

Предлагаю свое решение топ 2020 года (нет). Я уверен, что код можно было сделать проще, короче, но все же это работает). Пока-что остается вопрос с адаптивностью данных кругов!
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
Круги - считать абсолюты и т.д.
Линии - https://github.com/anseki/leader-line рендерится прямо на лету, перерисовывается прямо при ресайзе окна
Ответ написан
@Karpion
Я не понял, какие исходные данные м.б. для задачи. И по каким принципам это надо отобразить.
Ответ написан
@V0vash
НАшКОДИЛ
решал подобную задачу
линии строил svg -> path
положение нужных фигур находил Element.getBoundingClientRect()

Ну и математика, в данном случае я бы поступил примерно так:
нашёл бы центры кругов, протянул бы path

стоит отметить, что каждый из path строится попарно, при рендере страницы => на разных устройствах решает задачу
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы