4

There is only a Raphael.pathIntersection(path1, path2) utility in Raphaël library, and this method can only get intersection points of these 2 paths.

What I need is the intersection area.

As the image below, the method only get 2 points (marked with red circles). I expect to have 2 other points (marked with blue circles.) at the same time to form an intersection area path.

Example Chart.

Gajus
  • 69,002
  • 70
  • 275
  • 438
Will Wu
  • 553
  • 4
  • 15

1 Answers1

4

The two points should be all you need. However I'm not sure why you want to intersect. Either you need to know the area (width*height) or you need to visualize the intersection. Either way it's enough to know the two points of the rectangle. I've prepared a little example in case it would be useful to you.

var p1 = "M100 100 L100 400 L400 400 L400 100 Z",
    p2 = "M200 200 L200 500 L500 500 L500 200 Z";
var paper = new Raphael(0, 0, 800, 600);

paper.path(p1).attr({fill : "red", opacity : 1});
paper.path(p2).attr({fill : "blue", opacity : 0.5});

var points = Raphael.pathIntersection(p1, p2);
var w = points[1].x-points[0].x,
    h = points[0].y-points[1].y;
var group = paper.set();
group.push(paper.rect(510, 100, w, h).attr({fill: "yellow"}));
group.push(paper.text(610, 150, "The intersection area\nis drawn over here.\n \nWidth: " + w + "\nHeight: " + h));
andersand
  • 427
  • 2
  • 10
  • 1
    thank you very much @andersand, you answer works perfect when deal with 2 rectangles. I actually expect a more general solution for 2 paths, i.e. a rect and a triangle. – Will Wu Nov 22 '12 at 09:03
  • 1
    I've answered your question; don't change the scope in a comment? At least upvote my answer if it's useful to you, for the time i spent on it. – andersand Dec 03 '12 at 10:57
  • It is a good answer, if you try to do this for a path, you may discover a bug where it fails to report an intersection correctly -- http://stackoverflow.com/questions/12071186/raphael-path-intersection-not-working – John W. Clark Aug 03 '15 at 20:44