相交的svg封闭路径

时间:2013-06-19 22:45:41

标签: javascript svg d3.js convex-hull

测试svg path绘制的两个形状是否相交,有什么好方法(代码方面和性能方面)?我在d3中这样做,并使用“基数关闭”line interpolation

更具体地说,我正在创建凸包(比图像中更复杂),如果它们重叠,我想合并外壳。如果我使用“线性闭合”插值很容易做到,因为那时我可以使用顶点来计算交点,但是“基数闭合”插值在我使用它的地方看起来更好。

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

这是jsfiddle如何测试这些形状是否相交/重叠?

1 个答案:

答案 0 :(得分:4)

正如@Phrogz所说,你应该使用intersection library.