javascript - 拉斐尔路径交叉点不起作用

我遇到了 Raphael 和 .pathIntersection() 方法的问题。

JSFiddle example

您可以看到有两条线都与曲线相交，但是当我使用 .pathIntersection() 方法时，只有其中一条线显示为交叉点。

Github 中有一个 Unresolved 问题，可能是原因，但我想确保我也没有做任何愚蠢的事情。因此，如果任何人都可以看到我已经完成的问题，或者可能确认我正在正确使用它，并且这是库的问题，那就太棒了。

谢谢。

编辑:This fiddle 由 Speransky Danil 提供，并演示了当点靠得很近时线交点不起作用。可能是一种低头的途径作为一个可能的原因。

最佳答案

不知道这是否仍然有帮助(但谁知道)。我相信 .pathIntersection 有一个错误。我花了很多时间试图修复我参与的项目中的问题，但无济于事。所以我使用了 Raphael.getPointAtLength() 的替代方法。
看我做的这个 fiddle :http://jsfiddle.net/mosheh/SKLaQ/
代码:

// Computes a path string for a circle
Raphael.fn.circlePath = function(x , y, r) {
  return "M" + x + "," + (y-r) + "A"+r+","+r+",0,1,1,"+(x - 0.1)+","+(y-r)+" z";
}

// Computes a path string for a line
Raphael.fn.linePath = function(x1, y1, x2, y2) {
    return "M" + x1 + "," + y1 + "L" + x2 + "," + y2;
}

var x1 = 45.4159292035397;
var y1 = 81.0796460176991;
var r1 = 8.330383480825958;

var x2 = 43.4159292035397;
var y2 = 22.76696165191737;
var r2 = 8.330383480825958;
//Debug: c1 x,y,r 943.4159292035397 , 481.0796460176991 , 8.330383480825958
//Debug: c2 x,y,r 943.4159292035397 , 422.76696165191737 , 8.330383480825958

var paper = Raphael(document.getElementById("raphael"), 600, 600);
var c1 = paper.circle(x1, y1, r1);
c1.attr({fill: 'red'});
var c2 = paper.circle(x2, y2, r2);

// Get the path intersections
// In this case we are guaranteed 1 intersection, but you could find any
// intersection of interest.

// Note: pathIntersection has a bug when x1 and x2 are close to each other
// (play arround with the x1 value above and you will see //that when x1 is
// close to x2 then pathIntersection will return a null value) - also depends
// on the radius size of the circles - very complex!! - spent a lot of time
// trying to fix this - not to mention that I discovered this problem by chance
// (in a huge connected graph with nodes and links - some nodes were connected
// OK but others not which were suppposed to be connected!!)

//var c1i = Raphael.pathIntersection(linePath, c1path)[0];
//var c2i = Raphael.pathIntersection(linePath, c2path)[0];
//var line = paper.path(paper.linePath(c1i.x, c1i.y, c2i.x, c2i.y));

//So here is the alternative way which worked for me:
//Draw a line between 2 circles starting at their circumferences - this works

//Get a path line starting from the center of circle 1
var linePath1 = paper.linePath(x1, y1, x2, y2);

//Get a path line starting from the center of circle 2
var linePath2 = paper.linePath(x2, y2, x1, y1);

//Get a point on the line from center of circle 1 on the circumference
var fromC1 = Raphael.getPointAtLength(linePath1, r1);

//Get a point on the line from center of circle 2 on the circumference
var fromC2 = Raphael.getPointAtLength(linePath2, r2);

//Now let Raphael draw this line - and voila, the line just touches the
//circumferences of both circles - cool
var line = paper.path(paper.linePath(fromC1.x, fromC1.y, fromC2.x, fromC2.y));

关于javascript - 拉斐尔路径交叉点不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12071186/