分段贝塞尔曲线

最新推荐文章于 2024-12-04 13:06:15 发布

原创

最新推荐文章于 2024-12-04 13:06:15 发布 · 2.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文探讨了高阶贝塞尔曲线在计算性能和控制点影响上的问题，并提出使用分段贝塞尔曲线作为解决方案。关键在于如何确保分段处的平滑连接，通过控制点的设置，当两侧控制点与分段交接点共线且形成的线段长度相等时，可保证曲线的平滑过渡。具体实现中，中间点p1的坐标为(p0 + p2) / 2。

贝塞尔曲线的阶数过高，可能存在计算性能和控制点影响小的问题

分段贝塞尔曲线可以解决这个问题，只要解决分段处的平滑问题

直接放结论：当两侧控制点与分段交接点共线且形成的线段长度相等时，满足曲线平滑性质

即中间点p1.xy = (p0.xy + p2.xy) / 2

详细原理

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.translate(10, 10); // 重新映射画布上的 (0,0) 位置，避免溢出

function drawCircle(x, y, color, r = 6) {
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.fill();
}

function drawPath(path) {
  ctx.beginPath();
  path.forEach((p, i) => {
    if (i) {
      ctx.lineTo(p.x, p.y);
    } else {
      ctx.moveTo(p.x, p.y);
    }
  });
  ctx.stroke();
}

function bezier(pointList, t) {