Хит-тестирование 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 не пересекается с прямоугольником.