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); 

画像は次のようになります。私は青い丸で強調表示ポイントを見つけようとしています

。

Plunk：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