Question

我试图找出拉斐尔是否有两条路径相交。我试过getBBox（）但是它返回了路径本身周围框的坐标。有没有更简单的方法来实现这一目标？

Answer 1

之前的答案可能是拉斐尔的早期版本。 API现在包含一个pathIntersection方法，该方法返回一个相交点数组。您只需检查返回值的长度即可。

Answer 2

Bruteforce method。获取两条路径的所有点，看两个点是否相同。

我让你this，但也许你应该想出一个更好的比较解决方案。根据路径的长度，这可能很重。

var paper = Raphael(0, 0, '100%', '100%');

var path1 = paper.path("M0 0L100 100");
var path2 = paper.path("M100 0L0 100");

var array1 = new Array();
var array2 = new Array();

for(var i = 0; i < path1.getTotalLength(); i++) {
    array1.push(path1.getPointAtLength(i));
}

for(var i = 0; i < path2.getTotalLength(); i++) {
    array2.push(path2.getPointAtLength(i));
}

for(var i = 0; i < array1.length; i++) {
    for(var k = 0; k < array2.length; k++) {
        // the threshold +-1 is important!
        if(array1[i].x < ( array2[k].x + 1 ) &&
           array1[i].x > ( array2[k].x - 1 )) {
               if(array1[i].y < ( array2[k].y + 1 ) &&
                  array1[i].y > ( array2[k].y - 1 )) {
                   alert('yeah'); // uncomment this. It will alert 4 times.
               } 
        }  
    }
}

Answer 3

我想你需要自己实现一些东西，因为Raphael似乎没有提供这种功能。这是circle intersection example可能会有所帮助。 Here's something more specific

在运行您的实际算法之前，您可能想要检查边界框是否相交。如果有，请检查实际路径。

Answer 4

使用this可爱的交叉路口库。有了它，你可以做这样的事情：

var shape1 = new Path(pathElement1),
    shape2 = new Path(pathElement2);

var inter = Intersection.intersectShapes(shape1, shape2);

    if(inter.points.length > 0) {
        // yes they intersect!
    }

我的示例中的inter对象包含其他好东西。

拉斐尔的相交路径

4 个答案: