Raphael Path Intersection无法正常工作

时间:2012-08-22 10:31:09

标签: javascript raphael

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

JSFiddle example

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

Github中存在一个可能原因的问题,但我想确保自己也没有做任何愚蠢的事情。因此,如果任何人都可以看到我已经完成的问题,或者可能确认我正在使用它,那么图书馆的问题会很棒。

感谢。

编辑:This fiddleSperansky Danil提供,并展示了当点靠近时线路交叉不起作用。可能是一个俯视作为可能原因的途径。

1 个答案:

答案 0 :(得分: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));