Snap.svg API帮助查找直线和二次曲线的交点

Question

如何找到直线和二次曲线的交点？

这里是产生选择的数字代码：

var s = Snap(300, 300); 

    var path = s.path("M 35 50 h 100 v 50 q -25 -20 -50 0 q -25 20 -50 0 z") 

    path.attr({ 
    fill:'none', 
    stroke: 'black' 
    }); 

    var bbox = Snap.path.getBBox(path); 
    console.log(bbox); 
    var pbox = path.getBBox(); 
    console.log(pbox); 
    s.circle(bbox.x, bbox.y, 3).attr('fill', 'red'); 
    s.circle(bbox.x2, bbox.y2, 3).attr('fill', 'red'); 
    s.circle(bbox.cx, bbox.cy, 3).attr('fill', 'magenta'); 

    var l = s.line(bbox.cx, bbox.cy, 250, 200).attr('stroke', 'black'); 

    var lbox = l.getBBox(); 

    console.log(lbox); 

图像看起来是这样的：

我试图找到的蓝色圆圈突出了点。

普拉克：http://plnkr.co/edit/ZFo381tZfG4SHWHKyINZ?p=preview

Answer 1

管理单元有一个方法Snap.path.intersection。因此，如果您可以使用路径而不是行，则可以使用该方法。请注意，如果路径可能发生变化，则可能会有多个路口或没有路口，因此您可能需要循环穿过交叉路口，而不是仅采用第一个路口。代码

更改位...

var l = s.path('M'+bbox.cx+','+bbox.cy+'L250,200').attr({ stroke: 'black'}) 
var intersection = Snap.path.intersection(path.attr('d'), l.attr('d')) 
s.circle(intersection[0].x, intersection[0].y,5) 

example