На чем оптимально реализовать простой псевдо аксонометрический конструктор в браузере?

Question

[coderisimo]

Идея такая :
Используются простые (отрисованные в аксонометрии) элементы с прозрачностью там где надо. Например картинки - png . Таким образом можно сделать сложные контуры. Эти элементы перетаскиваются из поллитры на холст и сцепляются друг с другом определенными областями.
Таким образом можно компоновать коллажи. При таком подходе, думаю, тормозить при 20-30 элементах в браузере не должно. Задачи в общем не сложные :
1) Сцеплять автоматически определенными областями (представьте картинку вагона с передней и задней сцепкой. Когда сцепки соседних вагонов или вагона и локомотива находятся на определенном расстоянии происходит прилипание ).
2) Сохранять готовые конфигурации
3) модифицировать сущ. коллажи (добавлять новые элементы, расцеплять, удалять ненужные итд)

Опыта не много. Немного работал с fabric.js (около года назад). Сейчас этот вариант видится наиболее предпочтительным, но может, есть нечто более подходящее на данный момент? Возможно, более простые инструменты для работы с drag-drop подойдут. Совершенно не представляю, как реализовать "склеивание" определенных областей итд. В общем, любые советы, примеры или камменты - велкам!
Спасибо.

Answer 1

[Максим Тимофеев]

canvas + jquery

Comments

[coderisimo]

Можно подробнее? Чем это оптимальнее fabric или просто стандартного jquery Draggable Widget ?

[Максим Тимофеев]

coderisimo: Оптимальнее тем, что не грузится дополнительная библиотека. Так как все что Вы описали достаточно просто делается в canvas + jquery, зачем что-то еще? Если Вам удобно работать в fabric или еще с чем-то, то зачем вопрос? Что в Вашем понимании "оптимально"? Если скорость работы скрипта, то "canvas + jquery", если скорость разработки - то "то что хорошо знаете".

[coderisimo]

"В современном стандарте HTML5 есть поддержка Drag’n’Drop при помощи специальных событий.
Но в плане именно Drag’n’Drop у них есть существенные ограничения. Например, нельзя организовать перенос «только по горизонтали» или «только по вертикали». Также нельзя ограничить перенос внутри заданной зоны. Есть и другие интерфейсные задачи, которые такими встроенными событиями нереализуемы." Можете прокомментировать?

Оптимально это к примеру продвинутая библиотека для Drag’n’Drop, которая поддерживает "приклеивание" элементов к определенным областям и сериализацию-сохранение таких наборов итд. Я просто изучаю тему, если кто-то уже сталкивался с подобным , сможет дать мне дельный совет. Параллельно изучаю гугл , сейчас больше склоняюсь в JQuery , но реализация отдельных моментов пока не ясна.

[Максим Тимофеев]

coderisimo: jqueryui.com/draggable Смотрели?

[Максим Тимофеев]

Например, нельзя организовать перенос «только по горизонтали» или «только по вертикали».

- а оно Вам нужно?

[coderisimo]

Максим Тимофеев: смотрел - пока не понимаю как сохранять/загружать готовые коллажи (на fabric-js делал это элементарно https://dl.dropboxusercontent.com/u/19954007/old/p... и приклеивать элементы только отдельными отдельными частями (сцепками).

[Максим Тимофеев]

coderisimo: ссылка не рабочая.

[coderisimo]

Максим Тимофеев: в конце затесалась скобка - https://dl.dropboxusercontent.com/u/19954007/old/p...

[Максим Тимофеев]

coderisimo: Это редактор (ПО), вы не хотите ручками писать? Не совсем понимаю, что значит "сохранять/загружать готовые коллажи", в моем понимании у Вас будет набор картинок, возможно в svg, которые Вы по ftp зальете на сервер.

[coderisimo]

сохранять/загружать готовые коллажи - это значит составить поезд из 10 вагонов и сохранить этот коллаж, с возможностью его повторной загрузки на холст. про сервер не понял. выше есть ссылка на один из моих похожих проектов. отличие этого - элементы должны "сцепляться" . что это значит так же описано в формулировке вопроса.