12

What is a good way (both code-wise and performance-wise) to test if two shapes drawn by svg path is intersecting? I am doing this in d3 and is using the "cardinal-closed" line interpolation

More specifically, I am creating convex hulls (more complex than in the image), and I want to merge hulls if they overlap. It is easy to do if I use a "linear-closed" interpolation, because then I can use the vertices to calculate intersections, but the "cardinal-closed" interpolation looks better where I use it.

var v1 = [[100,100],[200,100],[200,200],[100,200]],
v2 = [[210,100],[310,100],[310,200],[210,200]];

var hull1 = d3.geom.hull(v1),
    hull2 = d3.geom.hull(v2);

var svg = d3.select("#foo")
    .append("svg");

var line = d3.svg.line()
    .interpolate("cardinal-closed")
    .x(function(d) {return d[0];})
    .y(function(d) {return d[1];});

svg.append("path")
    .attr("d", line(hull1));
svg.append("path")
    .attr("d", line(hull2));

Output of code

Here is a jsfiddle. How do I test if these shapes are intersecting/overlapping?

VividD
  • 10,456
  • 6
  • 64
  • 111
swenedo
  • 3,074
  • 8
  • 30
  • 49
  • I think you would have to get into the nitty-gritty of how `cardinal-closed` paths are made. Like, if you set that to `linear`, the two shapes don't intersect. So something about the way this (http://en.wikipedia.org/wiki/Cubic_Hermite_spline#Cardinal_spline) happens would have to be taken into account when coming up with a test – elsherbini Jun 19 '13 at 23:49
  • 7
    You can use the wonderful [intersection library from Kevin Lindsey](http://www.kevlindev.com/geometry/2D/intersections/index.htm) to test if any two SVG shapes intersect. – Phrogz Jun 20 '13 at 03:32
  • Thank you @Phrogz, that library is indeed wonderful!! :) – swenedo Jun 20 '13 at 07:55

1 Answers1

4

As @Phrogz said you should probably use the intersection library.

0xcaff
  • 13,085
  • 5
  • 47
  • 55