Карта Московского Метро на 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 Ваш вариант не работает

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

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