Question

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

有没有办法在raphael Js ???

中找到它

修改为了进一步澄清，假设我通过getByID（）得到一个元素，有没有办法让我得到与它相交的 ALL 元素（已经存在于画布中）。

Answer 1

您需要使用Raphael.isBBoxIntersect接受边界框作为参数（从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

<强> UPD 即可。有getIntersectionList SVG方法，它“返回其渲染内容与提供的矩形相交的图形元素列表”。但这似乎并不支持所有浏览器。

Answer 2

考虑多一点，我认为最好的解决方案应该是将元素转换为路径，然后比较它们是否相交。（我在我的例子中使用了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，你需要做的就是添加宽度和高度的组合）。 circle使用this link。

我希望得到一个嵌入拉斐尔的功能，可以做到这一点，但是小丑说“这些天不能依赖任何人，你必须自己做所有事情，不要我们 ！”。开玩笑。 RaphaelJs非常整洁。

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

2 个答案: