Raphael Path Intersection无法正常工作

问题描述

我遇到了Raphael和 .pathIntersection（）方法的问题。

I am having an issue with Raphael and the .pathIntersection() method.

你可以看到有两行两者都与弯曲线相交，但当我使用 .pathIntersection（）方法时，只有其中一条显示为交叉点。

You can see that there are two lines which both intersect the curvy line but only one of them is showing up as an intersection when I use the .pathIntersection() method.

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

There is an opened issue in Github with a possible cause but I wanted to make sure I wasn't doing anything silly either. So if anyone can see a problem I have done or possibly confirm I am using it right and it is a problem with the library that would be amazing.

谢谢。

编辑：由<$提供c $ c> Speransky Danil 并演示当点靠近时线路交叉点不起作用。可能是一个俯视可能的理由。

This fiddle has been provided by Speransky Danil and demonstrates line intersections not working when the points are close together. Possibly an avenue to look down as a possible reason.

推荐答案

不知道这是否仍然有用（但是谁知道）。我相信 .pathIntersection 有一个错误。我花了很多时间试图修复我参与的项目中的事情无济于事。所以我使用了 Raphael.getPointAtLength（）的替代方案。

看到我做的小提琴：

代码：

Don't know if this will still be helpful (but who knows). I believe that .pathIntersection has a bug. I spent a lot of time trying to fix things in the project I am involved in to no avail. So I used an 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 + "," + (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));

这篇关于Raphael Path Intersection无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！