Javascript 查找SVG路径的交点

是否有一种已知的方法可以找到SVG路径与其自身的相交点？以符号为例，它是一条在两点处相交的直线

我曾遇到过一个例子，但它似乎在谈论两个相交的形状，而不是一个相交的形状

我熟悉d3，所以任何基于javascript的答案都会很棒，但我也很高兴听到可以使用什么数学方法

---

谢谢

你说得对-凯文·林赛（）的图书馆似乎在这里完成了这项工作

告诉库查找相同形状的两个实例之间的交点，去掉

Vector2D

对象，剩下的是两组相同的交点（

Point2D

在库中键入对象）

这是主要部分：

var pathEl = path.node();
var intersections = [];

// Kevin Lindsey's library
var shape1 = new Path(pathEl);
var overlays = Intersection.intersectShapes(shape1, shape1);

for (i in overlays.points) {
    if (overlays.points[i].getName() == "Point2D") {
       intersections.push(overlays.points[i]);   
    }
}

完整的嵌入式示例如下：

var-ampersand="M 72.184621,99.39089 C 68.398038,95.61996 48.405425,73.700329 50.716835,49.985704 C 52.990823,26.655017 76.884556,12.578576 98.97427,11.448114 C 119.34404,10.405671 142.83345,16.156173152.28457,35.843184 C 162.40413,56.922579 150.99532,81.842705 134.24772,94.48352 C 119.34404、10.405671 142.085149.0690893.590914113.54803 80.869078118.1294 C 54.582831127.59557 34.539139149.03858 35.259701178.23878 C 35.916374204.84994 59.631137225.67546 85.210802229.70364 C 112.43115233.99018 134.41358229.54707 153.1347208.67628 C 161.17912199.70814 177.58763184.99294 185.761176.14503 C 200.35160.47941.46915 C216.66826112.37483 192.54569115.67347 196.78314103.62942 C 222.23036100.69638 247.81229、99.84462 273.34564、97.96536 C 277.34887109.81154 263.97786106.33066 246.613121.01207 C 227.0104137.59107 217.88679151.73768 201.01195170.86236 L 189.11358184.34708 C 181.105217167.42818181816106.41417.414141414.78414 2828514.414126.21297247.41796 100.27427252.39343 C 72.543606257.71262 39.651129254.69839 20.122962231.94973 C-0.62641014207.77846-4.0848351167.904318.462826143.66847 C 33.171306127.85873 41.031184120.17885 60.724466112.09432 C 76.147466105.76283 100.05575、99.431353 112.29677、94.160526、1784582.4782127.50818,32.380115 C 116.44184,14.281646 83.908653,15.752833 77.904904,37.000557 C 72.689417,55.458561 80.089538,67.982449 91.37226,80.93907 L 187.58994191.43156 C 199.42503205.63979 217.24414228.88851 237.39579232.51125 C 250.72342234.90721 267.253328.9328.93995.277.277932840.43226.239.269251.14471260.99681 219.58458257.23653 199.30993242.48439 C 187.00911233.53413178.95611227.18492 167.95716215.15746 L 72.184621,99.39089 z”；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，300）
.attr（“高度”，300）；
var path=svg.append（“svg:path”）
.attr（“d”，符号和）
.样式（“笔划宽度”，2）
.风格（“笔划”、“钢蓝”）
.样式（“填充”、“无”）；
//取自https://stackoverflow.com/questions/332422/how-do-i-get-the-name-of-an-objects-type-in-javascript
Object.prototype.getName=函数（）{
var funcNameRegex=/function（.{1，}）\（/；
var results=（funcNameRegex）.exec（（this.constructor.toString（））；
返回（results&&results.length>1）？结果[1]：“”；
};
//取自https://stackoverflow.com/questions/9229645/remove-duplicates-from-javascript-array
函数uniq（a）{
var prims={“boolean”：{}，“number”：{}，“string”：{}}，objs=[]；
返回a.filter（函数（项）{
变量类型=项目类型；
如果（输入prims）
返回prims[type].hasOwnProperty（item）？false：（prims[type][item]=true）；
其他的
返回objs.indexOf（item）>=0？false:objs.push（item）；
});
}
var pathEl=path.node（）；
var交点=[]；
//凯文·林赛图书馆
var shape1=新路径（pathEl）；
变量覆盖=相交。相交形状（形状1，形状1）；
对于（重叠点中的i）{
if（overlays.points[i].constructor.name==“Point2D”）{
交叉点推（叠加点[i]）；
}
}
//路径将为每个交点记录2个点，因此需要重复数据消除
var重复数据消除_交点=uniq（交点）；
var circles=svg.selectAll（“圆”）
.数据（重复数据消除）
.输入（）
.附加（“圆圈”）；
变量circleAttributes=圆
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）
.attr（“r”、“3”）
.style（“填充”、“红色”）；

希望有数学倾向的人能回答好这个问题。同时，这里有一个想法：如果你将路径表示为一系列直线（非共线）段，那么你只需检查任何段是否与任何其他段相交（不包括它连接的2段）。查找是相当简单的。但是，如果路径由数百段组成，则计算成本可能会很高。首先，d3四叉树对象和方法对于查找几何上彼此接近的元素非常有用。对于使用单个路径，您可以从将路径拆分为独立路径开始每个段找到每个段的边界框，然后使用四叉树来识别重叠的B盒。如果您的路径只包含直线，则交点测试很简单，但对于任意曲线则会变得很棘手。很好！发现其他人完成了困难的部分总是很好，但感谢您的帮助所有这些都在这样一个优雅的片段中。我相信将来会有一天我需要一个类似的函数。感谢一个伟大的工作示例mccannf。我用我自己的替换了你的符号和路径，没有找到点2D交点，只有向量2D坐标有c吗