【发布时间】:2013-06-16 15:49:35
【问题描述】:
什么是测试 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));
这是jsfiddle。 如何测试这些形状是否相交/重叠?
【问题讨论】:
-
我认为你必须深入了解
cardinal-closed路径是如何制作的。就像,如果您将其设置为linear,则这两个形状不会相交。因此,在进行测试时,必须考虑到这种 (en.wikipedia.org/wiki/Cubic_Hermite_spline#Cardinal_spline) 发生的方式 -
您可以使用美妙的intersection library from Kevin Lindsey 来测试是否有任何两个 SVG 形状相交。
-
谢谢@Phrogz,那个图书馆确实很棒!! :)
标签: javascript svg d3.js convex-hull