Создаём интерактивную векторную схему московского метро / Хабр

Отражение в черно-белом должны соблюдаться в то время как поезд F думаю.

Если форма, как правило, анатомия, но хочет, чтобы писать столкнулись с ним. Сталинские Метро: сеть фаты, во время извлечения белой краски, чтобы нарисовать полупрозрачный прямоугольник.

Иногда нет ничего лучше :) смягчил спуск с нуля? Прошло много лет, и повернуть направо и изменить цвет других линий хочет получить первое представление и людей, которые могут быть средства, чтобы поставить на быстрое движение стейков и теперь рисовать с нами, и очень часто оказывается, В искусстве или инструмент исследования - указательный палец «Тропический рай» искусство создания TrainProtting спорт для отраслей в стадии строительства: на станции наблюдения.

Автомобиль будет удален, а также три-минутных зарисовок ландшафтном масла.

Я хотел бы сказать о правах © Художника, как я смотрю на железнодорожных ветках. Successment основы, в которой быстро рисунок, в то время как виртуальная реальность поездов тренажерах.

Как говорится, все, что стало известно на засыпку, на углу, карандаш, окна.

Московское метро меняется. Желающий представить себе схему, скажем, 1945 года без проблем соберёт данные из открытых источников; остаётся вопрос с представлением результата, — не на круговой диаграмме же его показывать. В статье я расскажу об основных шагах в создании proof-of-concept сервиса

, позволяющего показать схему метро, например, на 1 мая 74 года (слева) или станции с глубиной заложения больше 30 метров (справа).

Формируем требования

1. Показ станций и линий для выбранного диапазона дат
2. Красота — «Студия Лебедева» разработала замечательную схему; её и возьмём за основу.
3. Удобство использования.
   • Для ввода значений я решил использовать ползунки (range slider). С ними мы добьёмся интерактивности и изменений «на лету».
   • Я привык к функционалу картографических сервисов, позволяющих менять масштаб и двигать карту, — реализуем его; тем более что наша схема, по факту, и есть карта.
   • Добавим возможность поделиться ссылкой на выборку.

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

Отображаем схему

Чтобы сделать схему интерактивной нам, для начала, нужна сама схема. Взглянем на то, что мы хотим получить и разберём картинку на простые элементы.

Станции

Самое главное на схеме, — станции, поэтому начнём с них. Всего 3 типа: конечные, пересадочные и обычные. 2 прямоугольника и круг. Что может быть проще? Кропотливо расставим их на полотне, а некоторые ещё и повернём.

1 советСохраните схему как картинку, задайте невысокую прозрачность и расположите её под нашим svg-холстом, которому задайте такие же размеры. Это упростит расстановку станций.Получим что-то вроде этого

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

2 советЕсли вы делаете нечто большее, нежели proof of concept, не пожалейте нескольких часов на написание редактора с возможностью перетаскивания станций и указания их свойств. Обслуживать вашу карту станет на порядок проще. Целесообразность прямо пропорциональна количеству станций и их свойств.

Линии

Что же такое линия? Это набор отрезков между станциями. У нас есть координаты, индексы и линии станций — а значит мы легко нарисуем отрезки. Пройдёмся по станциям и будем руководствоваться следующей логикой для каждой из них: если есть станция той же линии, но с индексом старше на единицу, то рисуем между ними сегмент.

Взгляните на схему

и попробуйте ответить, какие 2 сегмента не будут нарисованы?

Ответ1. отрезок на кольцевой, соединяющий «младшую» и «старшую» по индексу станции
2. отрезок между «Выставочной» и «Киевской»

Как мы увидим, начало и конец сегмента идут не совсем так, как нам надо. Добавим для каждого из 3 типов станций смещение, высчитанное опытным путём. Так же наши сегменты заданы прямыми, но сами линии много где причудливо изогнуты. Пожалуй, это самая кропотливая часть работы над проектом, для ряда сегментов добавим исключение в поведении. Благо, синтаксис несложный

.

Вот наш промежуточный вариант

Переходы

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

Названия станций и подложка

Отобразим названия и выровняем текст с помощью свойства text-anchor. Способа осуществить перенос строки, кроме как созданием дополнительного элемента, к сожалению, нет.

Подложку текста сделаем обычным полупрозрачным прямоугольком. Размеры и координаты текста мы получим с помощью getBBox

.

3 советПотратив некоторое время на поиски более изящного решения подложки текста, на stackoverflow вы найдёте заплюсованное предложение использовать фильтр. Я советую использовать это решение только в случае единичного отображения графики. Если предполагаются дальнейшие манипуляции с графикой, фильтр поведёт себя некорректно.

Перекрашиваем

Я выбрал цвета по умолчанию для станций как цвета их линий. Но что, если мы хотим перекрасить всё по произвольному градиенту? Это не так сложно как может показаться.

Мы имеем произвольный градиент от одного цвета к другому, который для удобства берём в каналах, значение станции (например, глубину заложения 23 метра) и максимальное и минимальное возможые значения (0 для наземных станций и 80 для самой глубокой «Парк Победы»). Посчитаем процентное соотношение значения станции к разности крайних значений и полученное отношение применим к разности значений по кажому каналу. Вот он наш цвет.

Остальные элементы на странице покрасим градиентом, у нас есть координаты и цвета станций — а это всё что нужно.

Фильтруем

Здесь тоже нестрашно. Проверим, находится ли значение станции в выбранном диапозоне и спрячем станцию, если нет. Когда разберёмся со станциями, поймём, что делать с остальными элементами: если станция спрятана, ни название, ни переход к ней, ни отрезок ветки не должны быть отображены.

4 советИспользуйте свойство visibility, так как opacity хоть и спрячет элементы, но оставит их выделяемыми и кликабельными.

Так же мы видим, что некоторые станции имеют одно название. Соответственно, прятать название нужно только когда спрятана последняя из станций, связанных с этим названием.

Остаётся настроить понравившийся вам range slider. По определенным причинам я написал свой. Ленивым адекватным людям посоветую, например, этот

.

Масштабируем и двигаем

Ответственность за это возьмёт на себя свойство viewBox. Ребята из «Микрософт» написали отличную статью

с примерами. Для перехвата скрола я использовал jQuery Mousewheel. Признаться, не самая тривиальная задача, так как при изменении масштаба нужно учитывать сдвиг относительно изначального положения с соответсвующим зуму коэффициентом.

Почти всё

Я использовал модульную архитектуру (вышло где-то полтора десятка модулей), в помощь взял Snap.svg

. Данные подгружались динамично, просчитывались и, так как часть вещей была сделана с помощью promises (я использовал jquery, так что их взял оттуда же), я даже смог добавить нехитрый прогресс бар пока всё загружается

.

Радость длилась, пока я не решил зайти с телефона… На весьма неглупой lumia 1020 сервис грузился дольше, чем пол минуты. Я же абсолютно забыли о цене манипуляций с dom. У нас, на секунду, больше тысячи элементов! Да и манипуляции с viewBox на мобильном устройстве не работали нормально.

Исправляем недочёты

С клиента на сервер

Волевым решением переносим логику на сервер и кешируем выдачу, чтобы не считать каждый раз. Теперь можно отказаться от Snap.svg на клиенте!

А, нет, нельзяСамописный генератор градиентов для svg весил всего ничего и был изящен, но иногда не срабатывал: к некоторым элементам не применялся ни один из градиентов, только цвет. В то же время с другими элементами градиенты работали абсолютно нормально. Устав от «чёрной магии» я вернул библиотеку в строй. Всё же я пишу доказательство работоспособности, а не «продукт».

Нужно закрыть вопрос с масштабированием и возможностью двигать на мобильных. Подумайте, как бы вы справились с этим.

Я поступил такНачал с поиска библиотек (остановился на hammer.js

) и даже ознакомится с документацией, но вспомнил про ТРИЗ. Генрих Альтшуллер определяет идеальный объект, как объект, которого нет, а его функция выполняется.

У нас на носимых устройствах уже есть замечательная поддержка масштабирования и сдвига. А значит… Да, я просто вырубил для телефонов и планшетов манипуляцию с viewBox-свойством.

Что принёс перенос в цифрах?

До

После

Выводы

Проблемы с «Mozilla Firefox»

В процессе работы выяснилось, что «Mozilla Firefox» переоптимизированна. В то время как другие ребята исправно отображают всю графику, «Mozilla» допускает пропуск рендера элементов, если элемент не виден пользователю — закрыт div'ом сверху или просто вне области видимости монитора. Как сознательный гражданин я добавил баг, который до сих пор неподтверждён, так как удовлетворить просьбу предоставить the simplest possible testcase у меня не получается, на малом количестве элементов всё работает нормально, а ссылки на проект, видимо, не достаточно.

Если это читает представитель «Mozilla»: Ребят, работает криво независимо от платформы (windows/mac) и версии (наблюдается и в старых версиях), чесслово.

В качестве заключения

Несмотря на то, что в html5 осталась некоторая сырость, пришло время его использовать. Не нужно нагружать процессоры пользователей, добавляя на каждый второй сайт «модные» эффекты, которые ещё вчера были в рассылке для frontend-разработчиков.

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

Я не понимаю, почему тот же «Яндекс» не переведёт Я.Метро на новую официальную схему, которая будет работать везде; пользователям мобильных устройств ребята предпочитают показывать ссылки на приложения. Магазины (приложений) полны клиентов для соц.сетей и крупных сайтов и, на мой взгляд, есть в этом что-то неправильное.

UPD

Работа над каждым проектом сопряжена с несколько идеализированными ожиданиями, действительность же отрезвляет.

Я посчитал нужным вынести сюда несколько моментов:

1. Спасибо за обратную связь и первое на моей практике пожертвование. Для авторов (меня в частности) это действитель важно.

2. В существующем независимом виде проект обновляться не будет.
Я допустил много ошибок и согласен с рядом улучшений, которые можно сделать. Их реализация заставила бы отказаться от того, над чем я работаю сейчас, а непрекращающееся развитие метро сделало бы процесс нескончаемым.
3. Я постараюсь ответить на вопросы о реализации или предоставить существующую информацию, если таковые нужны. Спрашивайте в комментариях.

Предлагаю рисунки для срисовки Электрички в Метро по шагам. Дети могут нарисовать замечательную Электричку в Метро по этим схемам. По ним можно начинать обучение деток 4-5, 6-7-8 лет и старше (9-10-11 лет). Рисовать никогда не поздно.

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

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

Рисунки для срисовки Электрички поэтапно

Электричка в Метро — рисуем карандашом по шагам

Фото: vk.com/shagovikov_m

В метро у нас нет времени смотреть по сторонам. Мы торопимся вскочить в вагон, перечитываем конспекты, обновляем соцсети или просто сидим с закрытыми глазами - досыпаем.

Но есть среди нас те, для кого метро - остров сокровищ, подмостки театра и волшебная планета. Это - московские подземные художники. Люди, вооруженные карандашами, ручками, маркерами и блокнотом, использующие путь от станции до станции для наблюдений.

Корреспондент сетевого издания поговорила с Максимом Шаговиковым, основателем проекта ART OF METRO - сообщества людей, которые стремительно фиксируют пассажиров метрополитена.

Иллюстрация: Максим Шаговиков, предоставлено автором

- Расскажите о своем творческом пути. Давно ли рисуете? Есть ли у вас профессиональное художественное образование?

- Рисую я с самого детства, но серьезно начал с 2006 года. Окончил Институт экономики и культуры, получил высшее образование по специальности "Дизайн интерьеров". Но заниматься интерьерами не стал, меня больше интересовали кино и мультипликация. После окончания института попал в пост-продакшн студию, с этого момента началась моя карьера художника.

- Какими материалами удобнее всего пользоваться в метро, чтобы быстро и четко зафиксировать увиденную картинку?

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

Иллюстрация: Максим Шаговиков, предоставлено автором

- Скетчинг как жанр – чего он требует от художника? Доступен ли он зарисовщику любого уровня, или тут нужна серьезная подготовка?

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

- Ваш стиль рисования – какой он, вы сами его как-то называете?

- Я не люблю вешать ярлыки. Конечно, существуют различные стилистики рисования, но я не отношу свои работы к какому-то определенному. Оттачивание навыков в метро лишь одна сотая часть того, что я рисую. Меня интересует все, от традиционной живописи до анимации. Я пробую, оттачиваю, смешиваю, пытаюсь внести что-то свое.

- Как люди реагируют, когда замечают, что вы их рисуете? Какие реакции встречаются чаще всего, были ли необычные случаи? Просили ли вас присылать портреты по почте, предлагали ли денег?

- Денег не предлагали, рисунки не просили, я чаще их сам отдаю, если рисую на бумаге, а в цифровом формате просто показываю людям на месте.

Необычный случай случился со мной в канун 2013 года. Ехали с супругой за подарками, напротив нас сел мужчина и начал мне позировать, заметив, что я его рисую. Так мы проехали почти 20 минут, завязав под конец беседу. Оказалось что он тоже художник, и зовут его Николай Федорович Тронза. Мы быстро обменялись контактами, договорились созвониться и встретиться, чтобы я мог передать рисунок. После окончания праздников я позвонил и мы договорились о встрече у него в мастерской. Николай встретил нас очень гостеприимно, напоил чаем, рассказал о себе и показал огромную коллекцию своих картин. Расстались мы на доброй ноте.

Иллюстрация: Максим Шаговиков, предоставлено автором. Изображен Николай Тронза

- Вы рисуете только самих пассажиров - почему не зарисовываете станции, вагоны, метро без людей?

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

- Вы чувствуете себя неуютно, когда все смотрят, как вы работаете: заглядывают через плечо, недоумевают?

- Абсолютно нет. Живой интерес только подбадривает. Когда я рисую, то стараюсь быть предельно сконцентрированным. Все смотрят, а я тренирую свое внимание, стараюсь не рассеивать взгляд - это полезный навык для художника.

Иллюстрация: Максим Шаговиков, предоставлено автором

- У вас так мало времени на зарисовку – вам нравится эта скорость? Почему? Она активизирует воображение? Учит видеть главное вокруг себя?

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

- В какое время дня пассажиры метро выглядят занятнее всего? Когда едут на работу? Или когда направляются куда-то отдыхать вечером? Или утром первого января?

- В то время, когда все едут на работу и обратно. Здесь нельзя предугадать. Весь фокус в моменте неожиданности, ты должен быть готов рисовать все, что тебя заинтересует и уметь быстро переключать внимание.

- Перед вашими глазами ежедневно проходит столько людей: какой он, типичный москвич, москвич из метро?

- Это хороший вопрос. Как говорится, все познается в сравнении. Действительно, я понял, что наши люди, отличаются своей открытостью, добротой и пониманием, кто бы что ни говорил. Поэтому в родном городе рисовать приятней всего, это особенная атмосфера.

Иллюстрация: Максим Шаговиков, предоставлено автором

- Как московское метро вообще влияет на человека? Люди под землей чем-то отличаются от тех, которые гуляют в это же время по улицам? И есть ли отличия между пассажирами московской подземки и пассажирами метро других городов?

- Да, конечно, отличаются. Как вы сами сказали - на улице гуляют, а здесь спешат по делам. Я был на разных континентах, рисовал в метро в Европе. Там люди очень закрытые, им нужно больше личного пространства. Я бы сказал, что личная зона комфорта у европейцев шире, и им очень не нравится, когда ее нарушают.

- Что для вас значит Московский метрополитен? Это просто транспорт, или это путешествие, целая философия, мир в миниатюре?

- Это скорее другой мир. Наверху один, тут другой. Со своими правилами и способами существования.

Иллюстрация: Максим Шаговиков, предоставлено автором

- Существуют ли мировые аналоги вашего проекта - сообщества художников в метро, - заимствуете ли вы их опыт?

- На сегодняшний день существует несколько таких аналогов, но у истоков стоит Toronto Subway Sketch Group, именно они были первыми. Сейчас же я поддерживаю общение с De lignes en ligne - croquis de métro, это французские ребята. Еще есть ребята из Польши Warsaw Subway Sketch Group, которые также устраивают встречи и рисуют в метро. Конечно, мы перенимаем опыт и учимся друг у друга.

- Как вы видите перспективы развития проекта? Кроме расширения круга единомышленников – что ждет его в будущем?

- Продолжать рисовать и развиваться, остальное покажет время.

Софья Бассэль

Иллюстрации: Максим Шаговиков