Карты, деньги, два ствола
Глянул сегодня гугл-карты - они добавили интересные штучки - создание своей карты, а там можно и линии добавлять, и области заполнять, и метки ставить. Прямо синхронно со мной выпустили :) Симпатично сделано, они применяют SVG и блоки.
Я посмотрел, как они рисуют линию, состоящую из квадратов и обалдел - в блоке находятся много-много скрытых-блоков. В нужный момент нужные блоки располагаются по формуле линии. Вот и весь секрет. Идея такая же, как и у библиотеки, которая рисует на странице что угодно (линии, круги и т.п.) с помощью абсолютно-позиционируемых блоков - и это без всякого SVG или canvas. Конечно, по скорости отстаёт, но для простейших задач отлично подходит.
А вообще мне понравилось, как рисуют линию в яндекс-картах - создаётся элемент HR! И потом как он там стилями и размерами выгибается, не вник пока, но линия получается неотличимой от рисуемой с помощью canvas (это применяется в Осле). Вот это гении.
Но, конечно, до гугл-карты мне далеко, нужно ещё много работать и многому учиться, чтобы сделать что-то подобное. глянул я тут случайно и увидел, что мой алгоритм рисовки карты хотя и похож на ихний, но есть отличия. Они заполняют блок картинками количеством под размер видимого окна и потом в нужный момент нужным картинкам изменяют src. Я же каждую требуемую картинку добавляю в блок и она там навечно остаётся. Разницы по внешнему нет, но у меня во время загрузки картинки притормаживает, а у гугла - нет. Поэтому в будущем буду двигаться в этом же направлении.
Я посмотрел, как они рисуют линию, состоящую из квадратов и обалдел - в блоке находятся много-много скрытых-блоков. В нужный момент нужные блоки располагаются по формуле линии. Вот и весь секрет. Идея такая же, как и у библиотеки, которая рисует на странице что угодно (линии, круги и т.п.) с помощью абсолютно-позиционируемых блоков - и это без всякого SVG или canvas. Конечно, по скорости отстаёт, но для простейших задач отлично подходит.
А вообще мне понравилось, как рисуют линию в яндекс-картах - создаётся элемент HR! И потом как он там стилями и размерами выгибается, не вник пока, но линия получается неотличимой от рисуемой с помощью canvas (это применяется в Осле). Вот это гении.
Но, конечно, до гугл-карты мне далеко, нужно ещё много работать и многому учиться, чтобы сделать что-то подобное. глянул я тут случайно и увидел, что мой алгоритм рисовки карты хотя и похож на ихний, но есть отличия. Они заполняют блок картинками количеством под размер видимого окна и потом в нужный момент нужным картинкам изменяют src. Я же каждую требуемую картинку добавляю в блок и она там навечно остаётся. Разницы по внешнему нет, но у меня во время загрузки картинки притормаживает, а у гугла - нет. Поэтому в будущем буду двигаться в этом же направлении.
Comments (6):
Это делается с помощью матричного преобразования:
//msdn.microsoft.com/work...erence/filters/matrix.asp
Могу рассказать подробнее, как это сделано на я.картах ;)