понедельник, июня 04, 2012

Лего-трубное глюкало своими руками за день из jQuery и всякой фигни

Для сайта, который вот-вот, и взойдёт, оставалось сделать конструктор для сборки дымоходов из деталей.

Сам сайт, понятное дело, тоже о дымоходах.

Не имея понятия, как это реализовать (но понимая, что Flash исключается, во-первых, потому что он Зло, а во-вторых, по ряду причин — например, не знаю я его), сел и нарисовал детальки. Смешные.


Рисовал в Inkscape, не заморачиваясь масштабом, но так, чтобы детали стыковались хотя бы. Основных деталей порядка 30.

Дальше стал вникать в jQuery UI, конкретно — примочки draggable и droppable. Это заработало из бокса. Изобрести пришлось только клонирование детали, взятой с палитры. Примеры из интернета не годились.

Больше всего времени ушло на допиливание бульдозера до самолёта.

Преобразования (горизонтальный флип и поворот на несколько фиксированных углов) поначалу сделал чистым CSS. Но обнаружилось, что флип перестаёт происходить на повёрнутых картинках. Пришлось отрисовать флипованные картинки (благо не все: например, среди предыдущих деталей средняя — зонт — не флипуется) и дать им класс flippable, по которому цепляется обработчик src.

Проверил на четвёрке браузеров, в одном обнаружился косяк. Угадайте, в каком. Ага, хрен там. Опера. Детали частично не прорисовываются при перетаскивании, оставляют призраков. Убрал со страницы анимированный гиф (мало ли?), обновил Оперу до последней. Не-а. Надо ещё попробовать самую последнюю версию jQuery/jQueryUI, а если не стрельнет — считать это багом Оперы. Жалко. IE, и тот осилил задачу.

Поигрался немного, нарисовал схему дымохода на даче, какой он есть, потом — каким он будет, потом — каким я его хотел бы. Ну прикольно же!

8 комментариев:

Степаныч комментирует...

Попробуй Strict режим DOCTYPE для оперы. Хотя это извращение...

Kirill комментирует...

Прикольно получается, когда много раз [-] наживаешь на области.
Кнопку "сохранить" еще нужно, а то жаль сотворенный шедевр терять. Ну и без хотя бы простенького наброска сечения крыши труба как-то странно выглядит.

Сергей комментирует...

ту Степаныч, гм, а правда, это иногда решало всякие глюки.

ту Кирилл, думал про сохранить, но в один день не уложился бы с этим довеском. Там, в принципе-то, можно на клиенте сохранять в куке массивом с координатами и айди деталей. И перекрытия с крышей хорошо бы доваить, да. Но, гыгы, настоящий мастер должен владеть искусством не доходить до совершенства правильное расстояние :)

dim3 комментирует...

Спасибо, очень интересно.

dim3 комментирует...

И действительно прикольно.

Шура комментирует...

А почему Flash - Зло?

Сергей комментирует...

Потому что Flash - закрытый формат, повсеместно используемый не по назначению. Надо стараться избегать закрытых форматов. Назначение Flash - интерактивная анимация. А из него сперва сделали инструмент для цацок-бирюлек и рекламы, а потом превратили просто в средство доставки видео.

Везде, где есть возможность сделать что-то либо на Flash, либо без Flash, надо выбирать второй путь.

И просто потому что среда разработки Flash 1) стОит денег, 2) недоступна под Линуксом, 3) требует серьёзных затрат времени на обучение. Заплатить денег Adobe за не особо нужный пакет, запускать его в виртуальной среде, убить много драгоценного времени - ради чего всё это? Ради того, что реализуется обычным Яваскриптом за день?

edwardy комментирует...

Почемуто иногда после поворота, определенного куска трубы, пропадает весь рисунок. Но после - + снова появляется. Это в Firefox 12

Поиск по этому блогу