Программирование
0,0
рейтинг
14 сентября 2013 в 23:33

Разработка → Карта Московского Метро на 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. Особенно это заметно на планшете.
Григорий Еремин @egaxegax
карма
14,0
рейтинг 0,0
Программирование
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (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.


    Зазеркальте, пожалуйста.
    • –1
      Проект есть в GitHub https://github.com/egaxegax/dbCartajs. На бесплатном appspot.com у Google установлен лимит на количество просмотров.
  • 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 Ваш вариант не работает

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

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