Как реализовать подобные стрелки в web?

Question

[Neyury]

Как можно реализовать подобные стрелки между блоками на веб-странице? Стрелки можно перетащить на другой блок. они следуют за перемещаемым блоком и т.д



Из возможных вариантов представляю (расплывчато) svg или canvas (с обоими вещами толком не работал), располагаемых за контейнером с блоками. А управление с помощью js, который хранит координаты блоков, стрелок, и что с чем связно. При клике на документ проверяется, есть ли на координатах стрелка, если есть, начинается ее перемещение за курсором, если следующие нажатие на блоке, стрелка закрепляется за блоком.

Comments

[copal]

делается математическая модель стрелки состоящая из векторов, которые только и ожидают нормаль чтобы поскорей принять форму и загипнотизировать своей работой новичков.

Нормаль высчитывается исходя из позиций место клика - курсор + расстояние между ними.

И вот значит после того как предыдущие шаги Вы реализовали создаете объект который при создании сохраняет току начала и реализует метод update в который Вы будите при драге передавать положение курсора. Осталось создать метод getRowPath который будет возвращать массив точек заново рассчитываемый стрелки и передавать его в метод рендера.

Answer 1

[xmoonlight]

Raphael.js (SVG) - там есть такой функционал.

Answer 2

[Михаил Белошицкий]

jointjs
Там правда разработчики пиарят свой новый фреймворк, rappid, но для диаграм со стрелочками будет достаточно бесплатного jointjs.