Карта Московского Метро на Canvas

    Идея попробовать нарисовать карту появилась после просмотра карты метро в Википедии в формате SVG. В Firefox она открывается долго, к тому же при разрешении 1600x1300 она не вмещается в экран, а скроллинг по ней работает тоже очень долго. Стало интересно, а в Canvas она тоже будет тормозить? Решил нарисовать свою версию карты метро в качестве очередного демо для проекта dbCartajs.

    image


    Canvas поддерживает далеко не все возможности, которые есть в SVG. Например, как выяснилось, он частично поддерживает рисование пунктирных линий: метод setDashLine поддерживает только Chrome, а Firefox использует свое свойство mozDash. Зато Canvas поддерживает Bezier Curve для отрисовки плавных изгибов.
    Я добавил возможность использования метода bezierCurveTo в dbCartajs, если в тройке координат третьим параметром идет символ 'Q', например, для объекта с координатами [[1,1,'Q'],[2,2,'Q'],[3,3,'Q'],[4,4,'Q'],[5,5,'Q'],[6,6,'Q']] метод bezierCurveTo будет вызван 2 раза. Также добавил проверку для поддержки Dash Line, который можно задать как свойство dash в mopt.

    Пиксельные координаты линий, станций, каналов, рек, ж/д путей переведены в градусы с долготой и широтой. Новые координаты объектов сохранены в файле mosmetro.js.

    Из станций сформирован выпадающий список. Выбор станции в нем центрирует ее на карте.

    В целом получается, что в Canvas карта отрисовывается намного быстрее, чем в SVG. Особенно это заметно на планшете.
    Метки:
    Поделиться публикацией
    Похожие публикации
    Комментарии 40
    • +25
      Без обид, но выглядит оно просто ужасно
      • 0
        Если отключить масштабирование надписей (свойство labelscale=0 в mopt в слое station в mosmetro.inc.js) надписи «разъедутся» при масштабировании. Также можно изменить рамер окна браузера, тогда изменится разрешение в Canvas и точность вывода объектов.
      • +3
        У меня вообще ничего не отображается.
    • 0
      Попробуй увеличить масштаб
      • +4
        Тут, внезапно, есть возможность отвечать на конкретные комментарии, не начиная новую ветку.
        • –1
          На мобильном трудно попасть в кнопку Ответить
          • –5
            Не надо игнорировать. Это почти правда. Этот пост и комментарии (кроме этого) я написал на iPad, проверяя работу скриптов на Safari, и действительно пару раз промахнулся мимо кнопки.
    • +5
      Таскается в сторону, обратную ожидаемой.
    • 0
      Touch не поддерживается. Точка на карте центрируется по клику
    • 0
      У меня на Safari (Mac), вообще ничего не отображается :(
      Но идея хорошая.
    • 0
      В Google Chrome Ваш вариант не работает. Firefox only?? P.S. SVG вариант без тормозов работает в хроме, а в FF тормозит. Может создали бы лучше issue для мозиловцев пусть svg оптимизируют.
      • –1
        Проверял не только в FF, a в IE9, FF3.5, FF19, Opera 12.15, Safari из iOS 5.1.1. Везде SVG притормаживает. В Хроме сам не проверял, читал в постах, но сейчас установлю и посмотрю.
    • +3
      Простите, но схема плохая со всех сторон. И функционально, что уже, в принципе, обозначили, и визуально: ей вряд ли можно пользоваться по назначению, не зная или, хотя бы, не представляя устройства московского метро. Кстати, на «Российской» уже можно выходить?

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

      Для сравнения, некоторые ребята и вовсе на чистом ЦСС умудряются делать работоспособные штуки: www.csstubemap.co.uk/
      • –4
        В целом да, это туториал рисования линий и окружностей с использованием канваса. Демонстрация использования translate, rotate, scale, bezierCurveTo, setLineDash. Насчет пригодности — нужно будет доделать вывод надписей (вывод курсивом, жирным), и тогда вывод будет более приятным и близким к оригиналу.
    • 0
      Скорость отрисовки впечатляет. Исправить ошибки наложения надписей и вообще супер будет!
    • 0
      Особенно это заметно на планшете.

      На планшете, под оперой, хромом и файрфоксом, у карты обрезан верх и низ и она не масштабируется. Более-менее выглядит только под фф, но надписи все равно накладываются.
      • 0
        Для масштабирования есть кнопки + и — справа, посередине (на белом фоне не сразу заметны). Вот пример с увеличением:

        • 0
          Да, действительно сначала их просто не заметил. Попробовал. Они масштабируют центральную точку карты. Как рассмотреть что-нибудь в районе алтуфьево?
          • 0
            Точка центрируется по клику (уже написано выше). Кликните по Алтуфьево.
    • 0
      В комбобоксе какая проблема с сортировкой: после Б — Ч, после Д — Э, В вообще куда то в конец улетела.
      • 0
        Сортировка есть но работает только в ff. Исправим.
        • 0
          вот у меня в ff то и не работало. а теперь 503.
    • 0
      Не знаю как в FF, о в хроме SVG еще и аппаратно ускоряется, поэтому в своё время выбрали этот вариант разметки (да еще и JS можно пихнуть и гору анимаций) для отображения интерактиной карты зала (смотреть с 30 секунды) с заказом билетов. На половинке FullHD экрана вполне шустро рисовалось.
      • +1
        Немного офтопик. Пожалуйста, если у вас есть выбор, не делайте цифровые клавиатуры в ряд (Если конечно вы имеете к этому отношение). Лучше сделайте привычную для пользователей 3х4 как в терминалах и банкоматах. Набирать на однорядной очень неудобно и не работает мышечная память.
        • 0
          Уже больше 2х лет к этому отношения не имею, но поверьте, заказчики в 70% случаев уверены что они специалисты по юзабилити высшего уровня (самое страшное когда один «специалист-заказчик» уходит в отпуск, его замещает другой спец, а потом первый спец выходит из отпуска, а второй пропадает и под занавес приходит директор и у него тоже есть свое мнение, как поиграться со шрифтами, цветом и размерами, а так же не плохо бы поменять всю структуру за пару дней до дедлайна).
    • +8
      Лебедев и Бирман плачут кровавыми слезами.
    • 0
      Идея хорошая, и реализация неплохая, но я бы посоветовал две вещи. Первое: названия станций отсортировать в алфавитном порядке. Второе: нарисовать полупрозрачные оси с пересечением в центре canvas, так, чтобы когда выбираешь станцию, она была на пересечении этих осей. Иначе, визуально, не всегда легко найти её прямо по центру. Да, и еще, добавьте тени к тексту, тогда лучше надписи будут читаться.
      • 0
        Сортировку и линии визирования добавил в новом апгрейде. Сейчас думаю как заменить центрирование по клику на таскание как у Яндекс.Карт.
    • 0
      На ретине отображается мутно, как будто картинку смотрю. Что странно, учитывая векторность.
    • +1
      Вы бы для отрисовки пунктирных линий использовали бы лучше такой кроссбраузерный код.
    • 0
      Over Quota

      This application is temporarily over its serving quota. Please try again later.


      Зазеркальте, пожалуйста.
    • 0
      Где в сети посмотреть то? Чтобы не качать с GitHub'a? Или я что то не увидел?
    • 0
      Вот тоже карта, отрисованная в Canvas в приложении. Как вам такая?
      image
      • 0
        Отлично. А где посмотреть? По виду похоже на приложение из Windows 8 под Metro-интерфейс (не путать с самим метро).
    • 0
      ;)
    • –1
      А есть такая же карта питерского метро?
      • 0
        Есть. На странице проекта dbcartajs есть ссылки на другие карты.
    • 0
      >SVG
      > открывается долго, к тому же при разрешении 1600x1300 она не вмещается в экран, а скроллинг по ней работает тоже очень долго.
      >Canvas
      > метод setDashLine поддерживает только Chrome, а Firefox использует свое свойство mozDash.
      > на Safari (Mac), вообще ничего не отображается
      > В Google Chrome Ваш вариант не работает

      Веб-технологии во всей красе

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