Хит-тестирование SVG-форм?

Браузеры, которые внедрили части спецификации SVG (Firefox и т.д.), бесплатно проводят тестирование для нас - если я присоединяю слушателя mousedown к объекту SVG, я получаю уведомление о каждом клике. Это удивительно, особенно для сложных многоугольников.

Мне интересно, есть ли способ, которым я могу использовать эту функцию для еще большего тестирования хит. Я хочу знать, пересекает ли данный прямоугольник любую из моих форм SVG.

Например, я добавляю к моему элементу 3 сложных полигона. Теперь я хочу знать, пересекает ли прямоугольник (40, 40, 100, 100) любой из них. Кто-нибудь имеет представление о том, как я мог бы подключиться к уже имеющейся поддержке проверки работоспособности, вместо того, чтобы добавлять сам этот код?

Спасибо

Ответы

Ответ 1

SVG 1.1 DOM имеет правильный метод (к сожалению, он еще не реализован в mozilla):

var nodelist = svgroot.getIntersectionList(hitrect, null);

Для полного рабочего примера см. здесь.

Ответ 2

Я не знаю никакого способа пересечения всего прямоугольника. Но вы можете пересечь точку, чтобы вы могли построить более сложную проверку:

var el= document.elementFromPoint(x, y);

предоставит вам элемент с наивысшим стеком в определенной относительной координате страницы. Вы получите элемент <svg>, если никакие фигуры внутри SVG не пострадали.

Это нестандартное расширение Mozilla, но оно также работает и с WebKit. К сожалению, хотя он существует в Opera, он не будет выглядеть внутри <svg>, поэтому в этом браузере элемент всегда будет SVGSVGElement.

Ответ 3

getIntersectionList отлично работает в Opera. Моя проблема заключается в том, что функции в спецификации SVG 1.1 Полная информация об этом требует, чтобы элементы были визуализированы (и возможная цель для событий указателя), чтобы их можно было обнаружить как удары. К сожалению, это делает эти функции бесполезными для тестирования ударов в игровом мире, где в настоящее время видна только часть мира.

Ответ 4

Версия checkIntersection (и getIntersectionList) Chrome проверяет ограничивающие элементы, а не сами элементы. Я смог написать свой собственный checkIntersection, который работает на chrome, используя холст с этим довольно привлекательным подходом, который, кажется, хорошо работает для маленьких прямоугольников и будет медленным для больших, поэтому он хорош для тестирования на удар. Этот метод будет работать как polyfill для checkIntersection в Chrome, для небольших прямоугольников и, возможно, для других браузеров, которые нарушили реализацию checkIntersection.

  • Создайте образ, который использует URI данных, содержащий ваш SVG outerHTML (возможно, вам также необходимо включить в него правила стиля), например поэтому (это изображение не обязательно должно быть на странице). Вы можете использовать обработчик события onload, чтобы определить, когда он загружен, если вам нужно.
  • Создайте холст, который будет использоваться для вашего прямоугольника с тестовым критерием (этот холст не должен быть на странице)

Чтобы проверить, пересекается ли прямоугольник с любой из ваших фигур, сделайте следующее:

  • Убедитесь, что холст имеет тот же размер, что и ваш прямоугольник (установите его ширину и высоту).
  • Очистить холст, используя контекст canvas метод clearRect()
  • Нарисуйте SVG на холсте с -x, -y, так что часть изображения, которая перекрывает холст, соответствует области, которую вы хотите протестировать, используя DrawImage()
  • Извлеките canvas ImageData с помощью контекста getImageData(). Каждый 4-й элемент массива данных является альфа-байтом, а ненулевое значение означает, что часть вашего SVG перекрывает прямоугольник. Если все 4 байта равны 0, ваш SVG не пересекается с прямоугольником.