JS построение маршрута по сетке?

Question

[d8m8n]

Как лучше всего реализовать построение маршрута по сетке. Пример на рисунке:

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

Как соединить два центра div'ов, и как к этому добавить начало и конец стрелочки(маршрута), сохраняя направление стрелки?
Использовать ли css? А может canvas поверх? А может есть готовые решения и я плохо искал?

Answer 1

[xmoonlight]

1. Самое простое - слои с прозрачными изображениями всех накладываемых частей стрелки ("начало", "конец/стрелка", "проход/прямая" и "поворот/угол" с нужной ориентацией) и JS.
2. SVG
3. Canvas

Comments

[d8m8n]

а если придется масштабировать (сетка большая, и надо уместить ее на экране), не будет проблем с этим?

[xmoonlight]

d8m8n, для самого простого случая - конечно же, будут проблемы с качеством контуров (с масштабированием - не будет проблем): это же растр.
Тогда любой из оставшихся 2-х берите.

[d8m8n]

xmoonlight, спасибо, буду делать, хочется сделать хорошо, поэтому и спрашивал.

[xmoonlight]

d8m8n, советую тогда сразу брать Raphael.js (SVG-библиотека)
линию (path): dmitrybaranovskiy.github.io/raphael/reference.html...
свой метод (доп.фигуру, например): dmitrybaranovskiy.github.io/raphael/reference.html...