Каким образом можно повернуть ее на нужный мне угол?
Найдено на тему «Canvas»:
xided
12 февраля 2015, 18:48
wakeupkids
7 августа 2014, 23:24
Как в 2.1 реализовать метки на Canvas? Речь вот об этой возможности — http://api.yandex.ru/maps/features/?p=canvas
Нужно быстро отрисовывать большое количество меток.
azproduction
6 января 2014, 17:22
Привет!
Хочу сделать что-то подобное http://julia-map.appspot.com/ но с использованием API отечественных карт. По сути мне нужно добиться от tileUrlTemplateвот такого интерфейса:
/**
* @param {Number[]} tileNumber Array of two numbers, the tile numbers on x and y.
* @param {Number} tileZoom Zoom level
* @returns {HTMLCanvasElement}
*/
Видел наличие layer.tile.CanvasTile, но не понял как его использовать :(
Очень хочу получить пример минимально иллюстрирующий решение мой проблемы.
sergei.murko
29 ноября 2013, 15:13
var salelayer = new ymaps.Layer('', {
tileTransparent: true
});
А как ему указать что я canvas собираюсь использовать?
eisenhorn13
27 сентября 2013, 12:44
Подскажите плиз, как отрисовать точку на карте на canvas. На сколько я понял, если использовать параметр overlayFactory: ymaps.geoObject.overlayFa
xenohunter
5 августа 2013, 23:02
Здравствуйте!
Возникла ошибка при попытке создания маршрута: не создаётся объект canvas внутри тега ymaps.graphics-canvas, следовательно, линии не отображаются и при обращении к нему генерируются ошибки, связанные с невозможностью присвоения свойств несуществующему объекту. Следом - перестаёт работать сама карта (нет отклика на обращение к методам). Такая же проблема - с линейкой и прочими возможностями, реализованными через canvas.
API подгружается через require.js; в проекте используется angular.js.
Автор Комментария
13 июня 2013, 01:12
Здравствуйте!
Необходимо было вокруг координаты обозначить область в форме круга, только граница области (окружность) должна быть по дизайну нарисована большими круглыми точками.
Сначала сварганил какую-то функцию которая через sin/cos расставляет кружочки, но потом понял, что сделал явно не то, ведь можно просто нарисовать круг с dotted outline'ом.
Но из-за того, что окружность рисуется через Canvas её обводку невозможно сделать dot'овой, а очень нужно.
Обыскал всю справку, но так и не нашёл, как можно отключить рисование Canvas'ом.
Собственно, как? )
Заранее спасибо.
tekunova
22 апреля 2013, 13:30
Рассказ о графике в API на РИФ-Воронеж 2013
С 24 по 26 апреля в Воронеже состоится конференция РИФ-Воронеж, на которой выступит Антон Корзунов, разработчик API Яндекс.Карт.
Антон расскажет о современных технологиях отображения графики, а также о том, почему мы в API Яндекс.Карт используем Canvas для решения наших задач.
Выступление Антона состоится в рамках секции «Современные средства разработки», которая состоится 24 апреля в 16:30.
Узнать условия участия в конференции и информацию о ее программе можно на сайте rifvrn.ru.
Приходите, слушайте, задавайте вопросы!
tekunova
19 апреля 2013, 12:42
Тестирование приложений на Canvas: рецепты на примере тестирования API Яндекс.Карт
Алексей Емелин, тестировщик API Яндекс.Карт опубликовал на Хабре статью о том, как он тестирует API. Вы можете прокомментировать статью и задать свои вопросы автору на Хабре или тут, в блоге.
Несмотря на то, что HTML5 всё ещё находится в процессе разработки, он уже появляется в веб-интерфейсах. Одним из основных нововведений этой версии HTML стал элемент Canvas, который используется для отрисовки двухмерной графики. Например, всё, что вы видите и с чем взаимодействуете в игре MMORPG от компании Mozilla или старом-добром Command and Conquer, отрисовывается и обрабатывается с помощью Canvas. Самые изощрённые умы даже реализуют полноценные формы на Canvas. Или интерактивную модель солнечной системы.
Фреймворки для работы с этим элементом растут как грибы после дождя; про то, как начать программировать, используя Canvas, написано огромное количество статей. Но есть один пункт, о котором, по-видимому, из-за узкой специфики говорят редко и мало. Речь идёт о тестировании приложений на Canvas. В каком-то смысле оно становится проблемой для инженера по тестированию, который привык обращаться к элементам на странице по их css или xpath селекторам, а затем выполнять с объектом какие-то действия. С Canvas такой подход не работает, ведь DOM элемент один, а объектов в нём — много.
Под катом на примере автоматизации тестирования API Яндекс.Карт я расскажу вам о том, как мы решили эту проблему в Яндексе.Как сейчас тестируются веб-интерфейсы
Инженер анализирует тестируемый сервис и составляет для его страниц Page Object'ы (по желанию тестировщика это можно делать с помощью библиотеки HtmlElements). Если он хочет красивых отчетов, то может воспользоваться фреймворком Thucydides. Затем в соответствии с имеющимися тестовыми сценариями пишутся автоматические тесты, использующие WebDriver API. То, что получилось, тестировщик запускает на ферме браузеров через Selenium Grid и ищет ошибки, просматривая пришедшие на почту отчёты.
Все просто и красиво, если в тестах не надо взаимодействовать с интерактивной графикой и проверять её. Но что же делать, если надо кликнуть по кругу на карте или перетащить квадрат из одного места в другое? Допустим, мы даже найдём Canvas, но нам нужен конкретный круг. Как кликнуть именно по нему?
Столкнувшись с графикой, мы поняли, что классический подход через Page Object тут не работает. А отказываться от WebDriver не хочется, ведь он дает нам важные бонусы: возможность запускать тесты во всех популярных браузерах или, например, выполнять на странице произвольный код JavaScript (что крайне полезно при тестировании JavaScript API). К тому же, инструмент поддерживается большим сообществом разработчиков.
То есть наш подход должен базироваться на WebDriver, но при этом уметь взаимодействовать со всеми элементами на странице, независимо от того, представлены они в DOM дереве документа или нет. Кроме того, мы должны уметь проверить результат нашего взаимодействия и отловить возможные JavaScript ошибки.Взаимодействие с элементами на странице
Как я уже сказал выше, тестирование интерфейса мы рассмотрим в контексте API Яндекс.Карт. Поэтому давайте посмотрим, с чем, собственно, нам приходится взаимодействовать в тестах.
Результатом работы API является карта, похожая на слоёный пирог. Самый первый, нижний, слой — схема местности. Над ней — слой графики. Это различные маршруты, линии линейки и даже метки, которые могут быть отображены и с помощью отличных от Canvas DOM элементов. Третьим идёт слой событий, над которым уже расположены всевозможные элементы управления картой (кнопки, выпадающие меню, поля ввода, слайдеры и прочее).
В этом «пироге» нас интересует взаимодействие со слоем графики, так как остальные части интерфейса представлены в виде отдельных DOM элементов и кликнуть по ним с помощью WebDriver не составит труда. Пользователи API Яндекс.Карт могут сказать: «Так у вас же есть API для всех графических объектов, взаимодействуйте с элементами на Canvas через него».
И именно такой подход используется многими инженерами для работы с объектами на Canvas. Но у него есть одна проблема — он далек от реальных действий пользователя. Обычный человек не вызывает в консолиclick()у JavaScript объекта, отвечающего за отображение маршрута на карте. Он просто берет и кликает мышкой в изображение. Работоспособность методаclick()не гарантирует корректность обработки реального клика. Поэтому мы пошли своим, альтернативным путём.
Чтобы понять, как лучше взаимодействовать с Canvas, надо знать как сама программа понимает, по какому объекту кликнул пользователь. В случае с API Яндекс.Карт применяется технология активных областей. Нечто подобное используется везде, где на Canvas есть интерактивные элементы.Общий алгоритм технологии активных областей:
- Программа хранит в себе информацию обо всех элементах, нарисованных на Canvas, об их пиксельных координатах.
- Она отлавливает события мыши, происходящие над графическими объектами. Это можно делать прямо на Canvas. В нашем же случае над слоем графики есть специальный прозрачный слой событий, накрывающий её всю.
- Координаты события мыши соотносятся с координатами объектов, и если событие произошло над каким-то объектом, то для него вызывается соответствующий обработчик.
Получается, что нам не нужен конкретный графический объект — нужно только подобрать координаты события и кинуть его на Canvas или некий слой событий. Но сделать это не так-то просто. Допустим, нам надо кликнуть в метку. Определить на глаз её координаты — непростая задача.
Если опираться на пиксели, то в случае с объектом Canvas размером 512 на 512 у нас получается 512х512 точек взаимодействия. Многовато. Чтобы облегчить себе жизнь, разделим Canvas на условные квадраты, а для еще большего удобства отобразим их полупрозрачным фоном над Canvas, чтобы инженер по тестированию мог видеть их глазами. Мы выбрали размер стороны квадрата равный 32 пикселям.
Теперь отчетливо видно: для того чтобы кликнуть в метку, необходимо кликнуть в центр квадрата с координатами [11, 11]. Зная размер стороны квадрата, эти координаты легко преобразуются в обычные пиксельные, с которыми и будет вызван клик по Canvas.x = 11 * 32 + 32 / 2; y = 11 * 32 + 32 / 2; click(x, y); // click(368, 368);
Стоит отметить, что данный подход мы используем и для взаимодействия с элементами управления картой, хотя до них можно добраться и через DOM дерево. Сделано это для того, чтобы обращение ко всем элементам на карте было в одном стиле. К сожалению, WebDriver не умеет кидать события в произвольной точке окна, а только на конкретном элементе DOM дерева. Поэтому, прежде чем вызвать событие, определим элемент для взаимодействия. Делается это через методelementFromPoint(x, y)объектаdocument. Если в этой точке кнопка, то событие бросится на ней, если графика — на Canvas.Проверка результатов взаимодействия
Когда мы нажимаем кнопку, она меняет свой вид — происходит анимация нажатия. В тесте эту анимацию можно проверить, запросив значения атрибутов DOM элемента, отвечающие за внешний вид кнопки. Появился нужный класс — значит анимация произошла. В случае же с объектами, нарисованными на Canvas, все обстоит несколько иначе. Тут мы уже не можем запросить класс или позицию на странице. Данные атрибуты есть только у самого Canvas, но не у объектов, нарисованных на нем, потому что их нет в DOM-дереве. Так как же проверить, правильного ли цвета у нас линия и изменилось ли положение полигона после того, как мы его перетащили мышкой?
С одной стороны, можно запросить цвет и положение посредством обращения к JavaScript объектам, отображаемым на Canvas. Но, как вы помните, никто не гарантирует, что API нам не врёт. В коде может быть ошибка, и JavaScript нам скажет, что линия красная, а глазами мы будем видеть, что она — синяя.
Но и тут есть выход. Достаточно сравнить внешний вид стабильной версии интерфейса с тестируемой. Иными словами, сравнить снимки двух окон браузера. Мы это делаем следующим образом:
- В один момент времени открываем обе версии интерфейса;
- Обе версии открываются в одной версии браузера, в разных окнах;
- Выполняем в обоих окнах одни и те же действия над интерфейсом;
- В нужный момент делаем снимки окон и сравниваем их попиксельно.
Такой набор действий позволяет нам избавиться от ряда проблем, связанных со сравнением внешнего вида интерфейсов. Во-первых, тесты не зависят от информации, меняющейся со временем. Во-вторых, появляется устойчивость к браузерозависимой вёрстке. И в-третьих, не надо хранить эталонное изображение.Отслеживание JavaScript ошибок
Последним пунктом нашего подхода к тестированию является отлов JavaScript ошибок. Тут, на первый взгляд, все просто: берём и используем метод onerror объекта window. Все хорошо в теории, но на практике у этого подхода есть одна большая проблема. В случае если ошибка произошла на хосте, отличном от открытого в браузере, нам не удастся прочитать её текст. Что делать?
Есть два варианта:
- добавить в ответ сервера специфический заголовок (работает не во всех браузерах).
- использовать плагин для Firefox, который собирает ошибки на уровне консоли браузера.
Что из этого выбирать, решать только вам. Оба варианта имеют право на жизнь.Что в итоге?
Как оказалось, задача тестирования веб-интерфейса, работающего с использованием Canvas, решается вполне успешно с помощью обычного WebDriver'а. Но на данный момент мы решили не останавливаться на достигнутом и смотреть в сторону улучшения взаимодействия тестов с интерфейсами. Если сейчас мы бросаем JavaScript события на DOM элементах, то в будущем хотели бы делать это так же, как и пользователь. Мы планируем реальное управление мышкой и клавиатурой. Для этого будет использован awt.Robot. Следите за новостями!P.S.: Если вы написали статью, сделали полезный пример или модуль, пишите нам в клуб, facebook или на почту ymapsapi@ya.ru.
serg.sikoev
2 апреля 2013, 17:45
Мне нужно по по событию обновления пробок получать картинку с картой/пробками.
Попробовал воспользоваться js библиотекой html2canvas.
Есть ли в API инструмент, который склеивает все слои и конвертирует результат в картинку/canvas?
qys
29 марта 2013, 14:36
В документации нашел только такую фразу:
О том, как создать и разместить карту с использованием технологии canvas, читайте в документации.
И больше ничего. Помогите, пожалуйста, конкретной ссылкой.
tekunova
28 марта 2013, 13:11
Предлагаю посмотреть видеозапись рассказа Антона Корзунова, разработчика интерфейсов API, о технологиях отображения графики, об особенностях SVG и canvas, а также о том, какие технологии и для каких задач используются в Яндекс.Картах.
Видео: использование canvas в Яндекс.Картах
Антон Корзунов, разработчик интерфейсов API, выступил на конференции HTML5 Camp с докладом «Все что можно и нельзя нарисовать на Canvas в API Яндекс.Карт».
Тезисы выступления:
— 3,5 технологии отображения графики.
— Наш опыт использования Canvas в Яндекс.Картах: какие проблемы решали, чего достигли.
— Дополнительные возможности для тех, кому нужно больше.
Вы можете посмотреть видео выступления Антона и других участников конференции.
Также рекомендуем вам посмотреть рассказ Антона о возможностях графики во второй версии API (видеозапись и презентация).
tekunova
4 марта 2013, 17:47
Все что можно и нельзя нарисовать на Canvas в API Яндекс.Карт
15 марта в 12:50 в Москве Антон Корзунов, разработчик интерфейсов API, выступит на конференции HTML5 Camp с докладом «Все что можно и нельзя нарисовать на Canvas в API Яндекс.Карт». Антон уже рассказывал о возможностях графики во второй версии API (видеозапись и презентация), но для HTML5 Camp он подготовил новый, более полный и интересный доклад.
Тезисы выступления:
— 3,5 технологии отображения графики.
— Наш опыт использования Canvas в Яндекс.Картах: какие проблемы решали, чего достигли.
— Дополнительные возможности для тех, кому нужно больше.
К сожалению, запись участников на конференцию уже закончилась, но в день конференции на сайте HTML5 Camp можно будет подключиться к онлайн-трансляции.
an-d-r-ej
21 ноября 2012, 12:59
Есть ли возможность передать в DOM элемент тайла не css свойство background, а
контекст?
Dmitry
2 августа 2012, 02:45
Добрый вечер, коллеги. В фичах нового АПИ нашёл такое описание
В JavaScript API Яндекс.Карт 2.0 для отображения большого числа меток можно использовать современную технологию HTML5 — canvas. Она позволяет показывать десятки тысяч объектов на одной карте без снижения производительности. При использовании canvas браузер воспринимает все ваши метки как одну картинку. Следовательно, карта загружается и работает с такой же скоростью, как если бы у вас был только один маркер.
К сожалению не осилил найти пример или описание того, как это сделать. Помогите пожалуйста с JS примером того, как через Canvas можно вывести точки с произвольными координатами из массива. Поиск по клубу, к сожалению тоже ничего не дал. Заранее спасибо.
P.S. Вывод через кластеризатор групп маркеров - мне не подходит.
thekashey
18 августа 2010, 18:26
Будет ли в обозримом или не очень будующем карты на новых технологиях.
Первичное применение карваса(лично я) вижу в плавном зуме и плавной замене тайлов.
Например как на флешевых гугл-картах.
Если не планируется - то какой уровень "раздербанивания" АПИ может привести к нарушению лицензии( нельзя использовать яндекс карты вне АПИ, но можно ли хардкорно поменять им рендер? )