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 plex 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));
Here is a jsfiddle. How do I test if these shapes are intersecting/overlapping?
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 plex 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));
Here is a jsfiddle. How do I test if these shapes are intersecting/overlapping?
Share Improve this question edited Jun 17, 2014 at 7:53 VividD 10.5k8 gold badges66 silver badges112 bronze badges asked Jun 19, 2013 at 22:45 swenedoswenedo 3,1149 gold badges32 silver badges50 bronze badges 3-
I think you would have to get into the nitty-gritty of how
cardinal-closed
paths are made. Like, if you set that tolinear
, the two shapes don't intersect. So something about the way this (en.wikipedia/wiki/Cubic_Hermite_spline#Cardinal_spline) happens would have to be taken into account when ing up with a test – elsherbini Commented Jun 19, 2013 at 23:49 - 7 You can use the wonderful intersection library from Kevin Lindsey to test if any two SVG shapes intersect. – Phrogz Commented Jun 20, 2013 at 3:32
- Thank you @Phrogz, that library is indeed wonderful!! :) – swenedo Commented Jun 20, 2013 at 7:55
1 Answer
Reset to default 6As @Phrogz said you should probably use the intersection library.