Построение графа с перетаскиваемыми узлами

Question

Я хочу заполнить некоторые пользовательские данные в браузере как график перетаскиваемых узлов, где каждый узел представляет пользователя, а ребра - это отношения между ними.Я нашел решение (оно работает): я использую перетаскиваемые div-ы поверх холста HTML5 (у div-ов больший z-индекс, чем у canvas, и, следовательно, они видны).Затем холст используется для рисования линий, соединяющих элементы div.Проблема в том, что каждый раз, когда пользователь «перетаскивает» событие, запускает событие «перетаскивания», необходимо очищать весь холст и перерисовывать ВСЕ края.Это приводит к мерцанию, и это, я думаю, не является оптимальным решением.Обратите внимание, что я на самом деле не профессионал в области HTML / CSS, и, возможно, мое решение очень наивно.

Я могу использовать любые ваши предложения от гуру CSS (3) / HTML (5).Я открыт для всевозможных решений, но хотел бы избегать света Flash / [Silver | Moon].

Как пример, мне действительно нравится интерфейс Pearltrees , но мой не нужнобыть , что фантазии.Я попытался «прочитать» файл main.js из их источника на странице, но это было несколько функций, каждый из которых заключен в одну строку.

Answer 1

У вас нет для очистки всего холста каждый раз, когда он рисует.Это просто простейший способ его кодирования.

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

Вы столкнетесь с трудностями, когда у вас будут пересекающиеся линии, с которыми вам придется справиться.Для простоты стирание может быть выполнено в прямоугольниках, тогда какая-то математика поймет, пересекают ли вы другие линии, и если это так, их тоже нужно будет перерисовать.более детально, но прямоугольников должно быть достаточно в большинстве случаев.

Answer 2

Я никогда не делал ничего подобного, но если вы можете использовать css3, вы можете использовать hr или aa div только с установленной верхней границей, а также изменить размер и повернуть его с помощью jquery + css3.