3

我对 Raphael 和.pathIntersection()方法有疑问。

JSFiddle 示例

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

Github中有一个未解决的问题，原因可能是这样，但我想确保我也没有做任何愚蠢的事情。因此，如果任何人都可以看到我已经完成的问题，或者可能确认我正在正确使用它，那么这就是图书馆的问题，这将是惊人的。

谢谢。

编辑：这个小提琴由提供Speransky Danil并演示了当点靠近时线交点不起作用。可能是一个低头的途径作为一个可能的原因。

4

1 回答 1

3

不知道这是否仍然有用（但谁知道）。我相信这.pathIntersection有一个错误。我花了很多时间试图修复我参与的项目中的问题，但无济于事。所以我使用了另一种使用Raphael.getPointAtLength().
看看我做的这个小提琴：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));
于 2013-04-09T04:37:59.203 回答