Идея попробовать нарисовать карту возникла после просмотра схемы метро в Википедии.
В Fire Fox долго открывается, к тому же при разрешении 1600х1300 он не помещается на экране, и пролистывать его тоже очень долго.
Стало интересно, но Холст Тоже замедлится? Я решил нарисовать свою версию Карты московского метрополитена как очередная демо-версия проекта dbcartajs .
Холст не поддерживает все функции, доступные в SVG .
Например, оказывается, что он частично поддерживает рисование пунктирных линий: метод setDashLine поддерживает только Хром , А Fire Fox использует свое имущество mozDash .
Но Холст поддерживает кривые Безье для рисования плавных кривых.
Я добавил возможность использовать метод БезьеКриваяTo для объекта дбКарта , если третьим параметром в тройке координат является символ Q, например, для объекта с координатами [[1,1,'Q'],[2,2,'Q'],[3,3,'Q'],[4,4,'Q'],[5,5,'Q'] ,[6,6,'Q']] метод БезьеКриваяTo позвонят 2 раза.
Также добавлена проверка на поддержку Пунктирная линия , который можно установить как свойство бросаться в объекте свойств швабра .
Пиксельные координаты линий, станций, каналов, рек, железнодорожных путей преобразуются в градусы с учетом долготы и широты.
Координаты нового объекта сохраняются в файле mosmetro.js .
Из станций формируется выпадающий список.
Выбор станции центрирует ее на карте.
В общем, получается, что в Холст карта рисуется гораздо быстрее, чем в SVG .
Особенно это заметно на планшете.
Теги: #Разработка сайта #JavaScript #html5 #Работа с векторной графикой #canvas #карта метро #dbcartajs #mosmetro
-
Общение В Удаленной Команде
19 Oct, 24 -
Цифровизация Общения: Зачем Нам Смайлы?
19 Oct, 24 -
6 Бизнес-Тенденций 2007 Года: Rip Desktop
19 Oct, 24
