相交 svg 闭合路径

Posted 2023-02-14

【中文标题】相交 svg 闭合路径

【英文标题】：intersecting svg closed paths

【发布时间】：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，那个图书馆确实很棒！！ :)

【参考方案1】：

正如@Phrogz 所说，您可能应该使用intersection library.