命中testingSVG形状?

已经实现了部分SVG规范的浏览器(Firefox等)为我们免费提供了testing – 如果我在SVG对象上附加了一个mousedown监听器,每当点击形状时我都会得到通知。 这是惊人的,特别是对于复杂的多边形形状。

我想知道是否有一种方法可以利用这个function进行更多的命中testing。 我想知道给定的矩形是否与我的任何SVG形状相交。

例如,我添加了3个复杂的多边形到我的元素。 现在我想知道矩形(40,40,100,100)是否与其中任何一个相交。 有没有人有一个想法,我怎么可能钩入已有的伟大的testing支持可用,而不是自己添加所有的代码?

谢谢

SVG 1.1 DOM只有正确的方法(不幸的是它还没有在mozilla中实现):

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

有关完整的示例,请参阅此处 。

我不知道任何交叉整个矩形的方式。 但是你可以交叉点,所以你可以build立一个更复杂的检查:

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

会给你在一个特定的页面相关的坐标最高的堆叠元素。 如果SVG中没有形状被击中,你会得到<svg>元素。

这是一个非标准的Mozilla扩展 ,但它也适用于WebKit。 不幸的是,虽然它存在于Opera中,但它不会在<svg>内部寻找,因此在该浏览器中,该元素始终是SVGSVGElement。

getIntersectionList在Opera中正常工作。 我的问题是SVG 1.1 Full规范中有关这个方面的函数要求必须渲染元素(以及指针事件的可能目标)才能被检测为命中。 不幸的是,这使得这些function在世界上只有一部分可见的游戏世界中进行命中testing是没有用的。

Chrome的版本checkIntersection(和getIntersectionList)testing元素边界框,而不是元素本身。 我能够写一个我自己的checkIntersection,它使用一个canvas来处理chrome,这个方法对于小矩形来说似乎很好,对于大矩形来说会很慢,所以对于命中testing来说很不错。 这种技术将在Chrome中用作checkIntersection的polyfill,对于小的矩形和其他可能会破坏checkIntersection实现的浏览器。

  1. 创build一个使用包含SVG的outerHTML的数据URI的图像(您可能需要在其中包含样式规则),就像这样 (这个图像不一定在页面中)。 您可以使用onload事件处理程序来确定何时加载,如果您需要。
  2. 创build一个用于你的命中testing矩形的canvas(这个canvas不需要在页面中)

要testing矩形是否与任何形状相交,请执行以下操作:

  1. 确保canvas与矩形的大小相同(设置其宽度和高度)
  2. 使用canvas上下文clearRect()方法清除canvas
  3. 在-x,-y的canvas上绘制SVG,使图像中与canvas重叠的部分对应于要使用drawImage()testing的区域。
  4. 使用上下文的getImageData()获取canvas的ImageData。 数据数组的每个第四个元素都是阿尔法字节,非零值表示SVG的一部分与矩形重叠。 如果所有的第4个字节都是0,那么你的SVG不会与矩形相交。