三次贝塞尔曲线计算错误排查：X=170时Y值偏差问题

问题描述 #

在Canvas绘制三次贝塞尔曲线时，调用getYByX方法获取X=170处的Y值，返回结果为110，但实际绘图显示该位置Y值约为20（Y轴已翻转，底部为0，顶部为200）。

核心错误点分析 #

1. 错误的t值计算逻辑 #

三次贝塞尔曲线的X坐标随参数t（范围0~1）的变化并非线性关系，如果代码中直接通过t = (目标X - 起点X) / (终点X - 起点X)计算t，会导致找到完全错误的t值，进而算出错误的Y值。

错误代码示例：

function getYByX(x) {
  // 错误：假设X随t线性变化，不符合三次贝塞尔特性
  const t = (x - p0.x) / (p3.x - p0.x);
  return (1 - t)**3 * p0.y + 3*(1 - t)**2 * t * p1.y + 3*(1 - t)*t**2 * p2.y + t**3 * p3.y;
}

2. Y轴翻转未同步到计算逻辑 #

Canvas默认Y轴向上递增，你通过translate(0, 200)和scale(1, -1)实现了Y轴翻转（底部为0，顶部为200），但如果计算Y值时未对结果做翻转处理，会导致返回值和视觉位置不匹配。

修正方案 #

步骤1：正确查找对应X的t值 #

通过遍历t∈[0,1]范围，找到使得贝塞尔曲线X坐标最接近目标值（170）的t：

function findTForX(targetX, p0, p1, p2, p3) {
  let closestT = 0;
  let minDiff = Infinity;
  // 步长越小精度越高，可根据需求调整
  for (let t = 0; t <= 1; t += 0.001) {
    const x = (1 - t)**3 * p0.x + 3*(1 - t)**2 * t * p1.x + 3*(1 - t)*t**2 * p2.x + t**3 * p3.x;
    const diff = Math.abs(x - targetX);
    if (diff < minDiff) {
      minDiff = diff;
      closestT = t;
    }
  }
  return closestT;
}

步骤2：计算对应t的Y值并处理翻转 #

用找到的t计算Y值，再转换为翻转后的视觉坐标：

function getYByX(targetX, p0, p1, p2, p3) {
  const t = findTForX(targetX, p0, p1, p2, p3);
  // 计算默认坐标系下的Y值
  const rawY = (1 - t)**3 * p0.y + 3*(1 - t)**2 * t * p1.y + 3*(1 - t)*t**2 * p2.y + t**3 * p3.y;
  // 转换为翻转后的Y值（底部为0，顶部为200）
  return 200 - rawY;
}

验证逻辑 #

调用修正后的方法，传入你的控制点参数，即可得到X=170处正确的Y值（约20）。

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