html - 绘制SVG贝塞尔曲线

Question

我有一个代表高阶贝塞尔曲线的控制点数组。
如何使用单个 SVG 路径绘制这条曲线？

更新:
例如，我有一组点:(x1, y1) (x2, y2) (x3, y3) (x4, y4) (x5, y5)。
SVG 路径在术语中的样子C、S、Q 还是 T？

UPD 2:解决方案
我问这个问题是为了描述一个用 TweenMax 动画的对象路径。 .
后来我在GreenSock forum上收到回复.
这是 CodePen example .

Answer 1

简短的回答:你不能。

SVG 仅内置二次曲线(二阶)和三次曲线(三阶)，而您显示的曲线是四阶曲线(四阶)。 SVG 没有通用的“N 项贝塞尔曲线”绘制指令，因此您将不得不在这里做出妥协。

一些选项:

1. 将曲线转换为(一系列)三次曲线并渲染它们。这是一个相当困难的问题，并不真正推荐。
2. 在足够多的点对曲线进行采样，这样通过这些点的多边形在人们看到的分辨率和缩放级别下看起来就像一条曲线。这很容易做到，但当然您不再有“曲线”，您现在有一个多边形。
3. 如上，但点数较少，然后计算通过这些点的 Catmull-Rom 曲线序列，然后将这些 CR 曲线转换为三次贝塞尔曲线(它们是同一类型的函数，可以 1:1 变换从一个到另一个)。这比 2 更好，因为你有一条曲线，但它可能看起来非常与原来的一样。当然，您使用的积分越多，结果就越好。
4. 使用 Canvas 绘制 N 次贝塞尔曲线，使用 toDataURL 函数根据结果构建图像，然后将该图像作为图像加载到您的 SVG 中。这将工作得很好，但如果您使用创建的 SVG 路径样式，让 Canvas 生成相同的样式可能是一个挑战。
5. 此列表可能会很长，所以让我们暂时停在这里。

底线:如果您需要显示更高阶的贝塞尔曲线，SVG 不是适合使用的技术(我建议只使用 Canvas 制作动画，或者更好的是，使用 d3.js 或 paper.js 之类的技术) . 可能是后者)。

如果您最终自己推出，采样功能会简单得可笑。曲线是参数化的，由从 0 到 1(含)的值 t 控制，并且可以写成嵌套线性插值:

getCurvePoint(t, points) {
  if (points.length === 1) return points[0];
  var newpoints = [];
  for(var i=0,j=1; j<points.length; i++,j++) {
    newpoints[i] = lerp2d(t, points[i], points[j]);
  }
  return getCurvePoint(t,newpoints);
}

lerp 函数是标准的线性插值函数:

lerp(ratio, start, end) {
  return ratio*start + (1-ratio)*end;
}

lerp2d(ratio, start, end) {
  return {
    x: lerp(ratio, start.x, end.x),
    y: lerp(ratio, start.y, end.y)
  };
}

还有一个简单的 jsbin 示例:http://jsbin.com/pesutibefu/edit?html,js,output使用积分

var points = [
  {x:50, y:100},
  {x:50, y:250},
  {x:210, y:250},
  {x:250, y:50},
  {x:380, y:150}
];

给我们:

尽管如果您需要动画漂亮的路径、具有可拖动的控制点等，Paper.js 草图会更容易使用。