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

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

Snap.svg APIs to help find the intersection point of a line and a quadratic curve

javascript

svg

snap.svg