我正在处理一个SVG图像,该图像描述了一个网格(所有元素都分组在<g id='map'>
上),具有绿色/红色/黄色矩形和一个“从头开始”区域(元素分组在<g id='edit'>
上)以及一个列表。用紫色填充的圆圈。
https://jsfiddle.net/3xz04ab8/
使用javascript,是否有一种方法可以检测<g id='map'>
组(紫色)组的哪些元素低于<g id='edit'>
组的元素/与之共同?
查找相交元素的最简单方法是对其进行迭代并一个接一个地检查相交。但这并不是最佳选择,因为每次迭代都必须一次又一次地读取和解析DOM属性。
由于您知道map
是静态的并且不会改变,因此您可以事先收集信息并准备数据以进行快速查找。如果我们假设map
上的所有rect都具有相同的大小,我们可以进行快速计算以获得与圆的面积相交的rect的位置。