拉斐尔的相交路径

Question

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

Answer 1

之前的答案可能适用于拉斐尔的早期版本。 API 现在包含一个 pathIntersection 方法，该方法返回相交点数组。您可以简单地检查返回值的长度。

Answer 2

暴力破解方法。获取两条路径的所有点，看看两个点是否相同。

我给你做了这个，但也许你应该想出一个更好的比较解决方案。根据您的路径有多长，这可能很重。

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 似乎没有提供这种功能。这是一个可能有帮助的圆交叉示例。 这里有更具体的内容。

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

Answer 4

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

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

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

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

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