最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - intersecting svg closed paths - Stack Overflow

programmeradmin8浏览0评论

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 to linear, 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
Add a ment  | 

1 Answer 1

Reset to default 6

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

发布评论

评论列表(0)

  1. 暂无评论