如何限制贝塞尔曲线的锚点停留在直线上

Question

如何限制贝塞尔曲线的锚点保持在线..

这是我的演示 - 链接

here is my codepen

Answer 1

二次贝塞尔曲线由起点、终点和控制点定义。曲线受控制点影响，但不一定穿过控制点。

但是，您可以操纵控制点，使曲线看起来像是经过某个点。具体方法如下：

function computeQuadraticBezierPathData(p0, p1, p2) {
  const controlPoint = {
    x: (p1.x * 2) - ((p0.x + p2.x) / 2),
    y: (p1.y * 2) - ((p0.y + p2.y) / 2)
  };

  const pathData = `M${p0.x},${p0.y} Q${controlPoint.x},${controlPoint.y} ${p2.x},${p2.y}`;
  return pathData;
}