基于HTML Canvas实现二次曲线上均匀间隔标记的技术问询

问题背景 #

要在HTML Canvas的二次贝塞尔曲线上按指定距离间隔放置标记点，而非按参数t（0到1）的线性间隔。已知二次曲线的起点、控制点、终点，以及计算曲线总长度、某点切线角度的函数，但直接按t均分的方式因t与实际路径距离非线性相关而失效。

现有工具函数 #

计算二次曲线某点的切线角度 #

function getQuadraticAngle(t, sx, sy, cp1x, cp1y, ex, ey) {
  var dx = 2*(1-t)*(cp1x-sx) + 2*t*(ex-cp1x);
  var dy = 2*(1-t)*(cp1y-sy) + 2*t*(ey-cp1y);
  return Math.PI / 2 - Math.atan2(dx, dy);
}

计算二次贝塞尔曲线总长度 #

function quadraticBezierLength(x1, y1, x2, y2, x3, y3) {
  let a, b, c, d, e, u, a1, e1, c1, d1, u1, v1x, v1y;

  v1x = x2 * 2;
  v1y = y2 * 2;
  d = x1 - v1x + x3;
  d1 = y1 - v1y + y3;
  e = v1x - 2 * x1;
  e1 = v1y - 2 * y1;
  c1 = a = 4 * (d * d + d1 * d1);
  c1 += b = 4 * (d * e + d1 * e1);
  c1 += c = e * e + e1 * e1;
  c1 = 2 * Math.sqrt(c1);
  a1 = 2 * a * (u = Math.sqrt(a));
  u1 = b / u;
  a = 4 * c * a - b * b;
  c = 2 * Math.sqrt(c);
  return (
    (a1 * c1 + u * b * (c1 - c) + a * Math.log((2 * u + u1 + c1) / (u1 + c))) /
    (4 * a1)
  );
}

核心解决方案：根据距离反求对应参数t #

由于二次贝塞尔曲线的长度与t没有解析反函数，需用**数值逼近法（牛顿迭代）**求解对应目标距离的t参数，具体步骤如下：

步骤1：实现分段长度计算函数 #

计算从曲线起点到任意t处的累积长度：

// 计算从起点(x1,y1)到参数t处的二次曲线长度
function quadraticBezierPartialLength(x1, y1, x2, y2, x3, y3, t) {
  // 生成t对应的曲线上的点
  const tx = (1 - t) ** 2 * x1 + 2 * (1 - t) * t * x2 + t ** 2 * x3;
  const ty = (1 - t) ** 2 * y1 + 2 * (1 - t) * t * y2 + t ** 2 * y3;
  // 调用总长度函数计算[0,t]段的长度
  return quadraticBezierLength(x1, y1, 
    x1 * (1 - t) + x2 * t, y1 * (1 - t) + y2 * t, 
    tx, ty);
}

步骤2：牛顿迭代法求解目标t #

给定目标累积距离，通过迭代快速收敛到对应的t值：

// 根据目标距离反求对应的t参数，tolerance为精度阈值
function findTByDistance(x1, y1, x2, y2, x3, y3, targetDist, tolerance = 1e-6) {
  const totalLength = quadraticBezierLength(x1, y1, x2, y2, x3, y3);
  if (targetDist <= 0) return 0;
  if (targetDist >= totalLength) return 1;

  let t = targetDist / totalLength; // 初始猜测值
  let iterations = 0;
  const maxIterations = 20;

  while (iterations < maxIterations) {
    const currentLength = quadraticBezierPartialLength(x1, y1, x2, y2, x3, y3, t);
    // 计算长度函数在t处的导数（即曲线在t点的切向量长度）
    const dx = 2 * (1 - t) * (x2 - x1) + 2 * t * (x3 - x2);
    const dy = 2 * (1 - t) * (y2 - y1) + 2 * t * (y3 - y2);
    const derivative = Math.sqrt(dx * dx + dy * dy);

    const delta = (currentLength - targetDist) / derivative;
    t -= delta;

    // 限制t在0-1范围内
    t = Math.max(0, Math.min(1, t));

    // 检查是否达到精度要求
    if (Math.abs(delta) < tolerance) break;
    iterations++;
  }

  return t;
}

步骤3：生成均匀间隔的标记点 #

基于上述函数，批量生成所有标记点的坐标与角度：

// 生成二次曲线上按指定间隔s的标记点数组
function generateEvenMarkers(x1, y1, x2, y2, x3, y3, s) {
  const markers = [];
  const totalLength = quadraticBezierLength(x1, y1, x2, y2, x3, y3);
  let currentDist = 0;

  while (currentDist <= totalLength) {
    const t = findTByDistance(x1, y1, x2, y2, x3, y3, currentDist);
    // 计算t对应的曲线上的点坐标
    const px = (1 - t) ** 2 * x1 + 2 * (1 - t) * t * x2 + t ** 2 * x3;
    const py = (1 - t) ** 2 * y1 + 2 * (1 - t) * t * y2 + t ** 2 * y3;
    // 计算该点的切线角度
    const angle = getQuadraticAngle(t, x1, y1, x2, y2, x3, y3);
    markers.push({ x: px, y: py, angle });
    currentDist += s;
  }

  return markers;
}

使用示例 #

// 定义二次曲线参数：起点(50,200)，控制点(250,50)，终点(450,200)
const sx = 50, sy = 200;
const cpX = 250, cpY = 50;
const ex = 450, ey = 200;
const step = 50; // 标记点间隔50像素

const markers = generateEvenMarkers(sx, sy, cpX, cpY, ex, ey, step);

// 在Canvas上绘制曲线和标记点
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制二次曲线
ctx.beginPath();
ctx.moveTo(sx, sy);
ctx.quadraticCurveTo(cpX, cpY, ex, ey);
ctx.stroke();

// 绘制标记点
markers.forEach(marker => {
  ctx.beginPath();
  ctx.arc(marker.x, marker.y, 5, 0, Math.PI * 2);
  ctx.fillStyle = 'red';
  ctx.fill();
});

内容的提问来源于stack exchange，提问作者Igor Shmukler