APIшник Яндекс.Карт, Москва, 26.04.2012 Рассказ Антона Корзунова (разработчика интерфейсов API Яндекс.Карт) о графике в API 2.0.

1. Графика на карте в API 2.0
Антон Корзунов,
разработчик интерфейсов API Яндекс.Карт
APIшник Яндекс.Карт, Москва, 26 апреля 2012

2. Когда мы в первый раз слышим про графику
1

3. Потом мы осознаем, что так не получится
2

4. И даже так
3

5. Начиналось все очень хорошо
— VML
— VRML
— ActiveX
— Java
Правда не было никаких «ускорителей»
4

6. Графику использовать было нельзя
— Отображение 10 полигонов убивало браузер
— Анимация противопоказана
— Мало кто умел готовить
5

7. А тем временем в неинтернете:
3dfx Voodoo LA 2 Open GL 2
DirectX 10 WoW Shaders
Oblivion GeForce
100500 Gflops
К сожалению на несколько лет мир
забыл про графику в интернете.
*2 секунды молчания*
6

8. API 1.x
— VML, SVG, SSG
— Polyline, Polygon
— Цвет, ширина обводки
— Сложный клиппинг
7

9. Не будем оригинальны
8

10. API 2.0
— VML, SVG, Canvas
— Polyline, Polygon, Circle, Rectangle, Image
— Цвет, ширина контура, стиль контура,
— множественная прозрачность
— Оптимизация для высокодетализированных
— данных
9

11. Мультфильмы!
10

12. Как готовить
1. Определить геометрию:
geometry.Polyline([[x,y],[x,y]])
geometry.Polygon([[[x,y],[x,y]]])
geometry.Rectangle([[x,y],[x,y]])
geometry.Circle([x,y],radius)
geometry.Point([x,y])
2. Создать геообъект: new ymaps.GeoObject(feature)
3. Добавить на карту
4. ?????
5. Profit!
11

13. Добавляем метки на Canvas
new ymaps.GeoObject({
geometry: {
type: 'Point',
coordinates: [x ,y]
}
}, {
preset: 'twirl#blueIcon',
overlayFactory:
ymaps.geoObject.overlayFactory.interactiveGraphics
});
12

14. Очень много меток
13

15. Умная графика
— Полигональная симплификация
— Оптимизация под viewport
— СSG
— Оптимизация рендеринга
— Быстрая математика
— Различные технологии одновременно
14

16. Симплификация
— На этапе вычисления PixelGeometry
— Выполняется в 2 этапа:
1. Отброс соседних вершин
2. Симплификация контура
15

17. Оптимизация под viewport
— RenderManager = ObjectManager в API 1.x
— graphics.Pane умеет клипаться
— graphics.Shape отбрасывает из себя крупные
— куски, которые не помещаются на карте
— Мы используем Sutherland-Cohen. Графика
— справляется с многоконтурными объектами
16

18. ConstructiveSolidGeometry
— Если fillRule = evenOdd, контуры полигона
— вырезаются друг из друга
— Нативно для VML и SVG. Обучили Canvas
— Если сложный полигон, алгоритмически
— вырезаем дырку
— А VML не умеет fillRule = nonZero
17

19. Оптимизация рендеринга
— И у вас Canvas, а у нас?
— А у нас тайловый Canvas
18

20. И многое другое
— Математика на основе монотонов
— Бинарный поиск
— Сложные графические фигуры
— Поддерживает интерактивность, анимации,
— любой браузер
19

21. Еще быстрее можно?
Если нужна скорость, используйте
overlay.staticGraphics напрямую
Его, кстати, можно добавить в любой IPane
(можно получить ускорение до двух раз, а можно и наоборот)
20

22. Лучшее, конечно, впереди
21

23. Помните!
22

24. Вопросы?
Антон Корзунов
kashey@yandex-team.ru
@theKashey