Raphael's intersection does not work

Question

I have a problem with Raphael and the .pathIntersection() method.

JSFiddle example

You can see that there are two lines that intersect with the curve of the curve, but only one of them appears as the intersection when I use the .pathIntersection() method.

There is an open problem on Github with a possible cause, but I wanted to make sure that I didn't do anything stupid either. Therefore, if someone can see the problem that I made, or perhaps confirmed that I am using it correctly, and the problem with the library will be awesome.

Thanks.

EDIT: This script was provided by Speransky Danil and demonstrates that line intersections do not work when the points are close to each other. Perhaps the prospect of looking down as a possible reason.

Answer 1

I don't know if this will still be useful (but who knows). I believe .pathIntersection has an error. I spent a lot of time trying to fix the situation in the project in which I participate, but to no avail. So I used the alternative using Raphael.getPointAtLength() .
See this fiddle I made: http://jsfiddle.net/mosheh/SKLaQ/
Code:

 // Computes a path string for a circle Raphael.fn.circlePath = function(x , y, r) { return "M" + x + "," + (yr) + "A"+r+","+r+",0,1,1,"+(x - 0.1)+","+(yr)+" 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));