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