圆形时间Scrubber光标定位异常：需调整0弧度起始位置

我懂你遇到的痛点——Math.atan2(y, x)默认把0弧度放在正X轴方向（也就是鼠标在圆形右侧、y=0的位置），但你需要让0弧度锚定在正Y轴方向（鼠标在圆形底部、x=0且y≥半径的位置）。本质上就是给坐标系做个90度的旋转偏移，下面是具体的解决方法：

核心思路 #

Math.atan2(y, x)返回的角度范围是[-π, π]，0对应正X轴。我们要把这个坐标系顺时针旋转90度（等价于给原始角度减去π/2弧度），再把结果归一到[0, 2π]范围，最后映射到[0,1]的进度值。

完整实现代码 #

假设你的圆形scrubber有中心坐标centerX/centerY和半径radius，可以用这个函数计算进度：

function calculateScrubberProgress(mouseX, mouseY, centerX, centerY, radius) {
  // 计算鼠标相对于圆形中心的坐标偏移
  const relativeX = mouseX - centerX;
  const relativeY = mouseY - centerY;

  // 获取原始atan2角度（0弧度在正X轴）
  const rawAngle = Math.atan2(relativeY, relativeX);
  // 偏移90度，将0弧度转到正Y轴（圆形底部）
  let adjustedAngle = rawAngle - Math.PI / 2;

  // 把负数角度修正到[0, 2π]范围内
  if (adjustedAngle < 0) {
    adjustedAngle += 2 * Math.PI;
  }

  // 将角度映射到[0, 1]的进度值
  return adjustedAngle / (2 * Math.PI);
}

双向绑定的反向计算 #

如果需要从进度值反推scrubber的光标位置（比如播放器进度更新时同步光标），也要用对应的偏移逻辑：

function getScrubberCursorPosition(progress, centerX, centerY, radius) {
  // 从进度转换为偏移后的角度（0弧度在正Y轴）
  const adjustedAngle = progress * 2 * Math.PI + Math.PI / 2;
  // 计算对应的坐标
  const cursorX = centerX + radius * Math.cos(adjustedAngle);
  const cursorY = centerY + radius * Math.sin(adjustedAngle);
  
  return { x: cursorX, y: cursorY };
}

验证效果 #

当鼠标位于圆形底部（mouseX = centerX，mouseY = centerY + radius）时：

• relativeX = 0，relativeY = radius
• 原始角度rawAngle = Math.atan2(radius, 0) = π/2
• 调整后角度adjustedAngle = π/2 - π/2 = 0
• 进度值就是0/(2π) = 0，完全符合你的需求。

内容的提问来源于stack exchange，提问作者S.C.