我的画布中有多个元素。我想找到所有与当前所选元素相交/重叠的元素。
有没有办法在raphael Js ???
中找到它修改 为了进一步澄清,假设我通过getByID()得到一个元素,有没有办法让我得到与它相交的 ALL 元素(已经存在于画布中)。
答案 0 :(得分:0)
您需要使用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方法,它“返回其渲染内容与提供的矩形相交的图形元素列表”。但这似乎并不支持所有浏览器。
答案 1 :(得分:0)
考虑多一点,我认为最好的解决方案应该是将元素转换为路径,然后比较它们是否相交。 (我在我的例子中使用了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非常整洁。