Сам сайт, понятное дело, тоже о дымоходах.
Не имея понятия, как это реализовать (но понимая, что Flash исключается, во-первых, потому что он Зло, а во-вторых, по ряду причин — например, не знаю я его), сел и нарисовал детальки. Смешные.
Рисовал в Inkscape, не заморачиваясь масштабом, но так, чтобы детали стыковались хотя бы. Основных деталей порядка 30.
Дальше стал вникать в jQuery UI, конкретно — примочки draggable и droppable. Это заработало из бокса. Изобрести пришлось только клонирование детали, взятой с палитры. Примеры из интернета не годились.
Больше всего времени ушло на допиливание бульдозера до самолёта.
Преобразования (горизонтальный флип и поворот на несколько фиксированных углов) поначалу сделал чистым CSS. Но обнаружилось, что флип перестаёт происходить на повёрнутых картинках. Пришлось отрисовать флипованные картинки (благо не все: например, среди предыдущих деталей средняя — зонт — не флипуется) и дать им класс flippable, по которому цепляется обработчик src.
Проверил на четвёрке браузеров, в одном обнаружился косяк. Угадайте, в каком. Ага, хрен там. Опера. Детали частично не прорисовываются при перетаскивании, оставляют призраков. Убрал со страницы анимированный гиф (мало ли?), обновил Оперу до последней. Не-а. Надо ещё попробовать самую последнюю версию jQuery/jQueryUI, а если не стрельнет — считать это багом Оперы. Жалко. IE, и тот осилил задачу.
Поигрался немного, нарисовал схему дымохода на даче, какой он есть, потом — каким он будет, потом — каким я его хотел бы. Ну прикольно же!
8 комментариев:
Попробуй Strict режим DOCTYPE для оперы. Хотя это извращение...
Прикольно получается, когда много раз [-] наживаешь на области.
Кнопку "сохранить" еще нужно, а то жаль сотворенный шедевр терять. Ну и без хотя бы простенького наброска сечения крыши труба как-то странно выглядит.
ту Степаныч, гм, а правда, это иногда решало всякие глюки.
ту Кирилл, думал про сохранить, но в один день не уложился бы с этим довеском. Там, в принципе-то, можно на клиенте сохранять в куке массивом с координатами и айди деталей. И перекрытия с крышей хорошо бы доваить, да. Но, гыгы, настоящий мастер должен владеть искусством не доходить до совершенства правильное расстояние :)
Спасибо, очень интересно.
И действительно прикольно.
А почему Flash - Зло?
Потому что Flash - закрытый формат, повсеместно используемый не по назначению. Надо стараться избегать закрытых форматов. Назначение Flash - интерактивная анимация. А из него сперва сделали инструмент для цацок-бирюлек и рекламы, а потом превратили просто в средство доставки видео.
Везде, где есть возможность сделать что-то либо на Flash, либо без Flash, надо выбирать второй путь.
И просто потому что среда разработки Flash 1) стОит денег, 2) недоступна под Линуксом, 3) требует серьёзных затрат времени на обучение. Заплатить денег Adobe за не особо нужный пакет, запускать его в виртуальной среде, убить много драгоценного времени - ради чего всё это? Ради того, что реализуется обычным Яваскриптом за день?
Почемуто иногда после поворота, определенного куска трубы, пропадает весь рисунок. Но после - + снова появляется. Это в Firefox 12
Отправить комментарий