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有一个方法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