javascript - 查找与特定元素相交的所有元素 - RaphaelJs

Question

我的画布中有多个元素。我想找到与当前选择的元素相交/重叠的所有元素。

有没有办法在 raphael Js 中找到这个？

编辑 为了进一步澄清，假设我通过 getByID() 获得一个元素，有没有办法让我获得与它相交的所有元素（已经存在于画布中）。

Answer 1

再想一想，我认为最好的解决方案应该是将元素转换为路径，然后比较它们是否相交。（我在我的例子中使用了 jQuery，但你可以很容易地在没有 jQuery 的情况下做到这一点）。

intersectArray=new Array();  
paper.forEach(function (e) {
    isIntersection=Raphael.pathIntersection(currentElement.attr("path"), e.attr("path"));  //Need to check with currentElement
    if(!jQuery.isEmptyObject(isIntersection)) intersectArray[]=e.node.id; //assuming e has got ID. You can put any identifier for e.
}

我不认为你可以rect得到circle一条路径。但是编写一个转换rect为路径的函数非常容易（因为您知道 x,y 您需要做的就是添加宽度和高度的组合）。使用circle此链接。

我希望在 Raphael 中嵌入一个可以做到这一点的功能，但正如小丑所说：“现在不能依赖任何人，你必须自己做所有事情，不是吗！”。只是在开玩笑。RaphaelJs 真是太棒了。

Answer 2

您将需要使用Raphael.isBBoxIntersectwhich 接受边界框作为参数（从Element.getBBox.

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

var circle2 = paper.circle(60, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle2.attr("fill", "blue");
// Sets the stroke attribute of the circle to white
circle2.attr("stroke", "#fff");

alert(
  Raphael.isBBoxIntersect(
    circle.getBBox(),
    circle2.getBBox()
  )
);

此代码工作示例：http: //jsbin.com/uwiyeg/1/edit

升级版。有getIntersectionListSVG 方法“返回其渲染内容与提供的矩形相交的图形元素列表”。但这似乎并非所有浏览器都支持。