React弧形滑块的角度与数值双向转换实现问题

首先，你的核心问题在于角度正负切换导致的范围不连续，解决思路是先将角度归一化到统一区间（比如-180°到180°），再基于你定义的分段线性映射（50°→最小值，-90°→中间值，130°→最大值）实现双向转换。

1. 角度转数值函数 #

这个函数会先归一化输入角度，再根据角度所在的分段（50°到-90°、-90°到130°）计算对应数值：

export function angleToValue(params: {
  degree: number;
  min: number;
  max: number;
}) {
  const { degree, min, max } = params;
  // 将角度归一化到 [-180, 180] 区间，统一处理正负角度
  const normalizedDeg = ((degree + 180) % 360) - 180;

  const minAngle = 50;
  const maxAngle = 130;
  const midAngle = -90;
  const midValue = min + (max - min) / 2;

  let value: number;

  // 处理第一段：50° 顺时针到 -90°，对应数值从 min 到 midValue
  if (normalizedDeg >= minAngle || normalizedDeg <= midAngle) {
    const angleSpan = Math.abs(midAngle - minAngle);
    // 计算当前角度到50°的顺时针距离
    const angleDistance = normalizedDeg >= minAngle
      ? normalizedDeg - minAngle
      : (360 - minAngle) + (normalizedDeg + 180);
    const ratio = angleDistance / angleSpan;
    value = min + ratio * (midValue - min);
  } 
  // 处理第二段：-90° 顺时针到 130°，对应数值从 midValue 到 max
  else {
    const angleSpan = maxAngle - midAngle;
    const angleDistance = normalizedDeg - midAngle;
    const ratio = angleDistance / angleSpan;
    value = midValue + ratio * (max - midValue);
  }

  // 确保数值不会超出 min/max 范围
  return Math.max(min, Math.min(max, value));
}

2. 数值转角度函数 #

根据数值所在的区间，反向计算对应的旋转角度：

export function valueToAngle(params: {
  value: number;
  min: number;
  max: number;
}) {
  const { value, min, max } = params;
  const minAngle = 50;
  const maxAngle = 130;
  const midAngle = -90;
  const midValue = min + (max - min) / 2;

  let angle: number;

  // 数值从 min 到 midValue，对应角度从50°顺时针转到-90°
  if (value <= midValue) {
    const ratio = (value - min) / (midValue - min);
    const angleSpan = Math.abs(midAngle - minAngle);
    angle = minAngle - ratio * angleSpan;
  } 
  // 数值从 midValue 到 max，对应角度从-90°顺时针转到130°
  else {
    const ratio = (value - midValue) / (max - midValue);
    const angleSpan = maxAngle - midAngle;
    angle = midAngle + ratio * angleSpan;
  }

  // 归一化到 [-180, 180] 区间
  return ((angle + 180) % 360) - 180;
}

3. 修复拖动时的角度限制逻辑 #

你原有的onDrag函数中角度限制逻辑存在错误，以下是修正后的版本，确保旋钮不会超出50°到130°的弧形范围：

function onDrag(event: MouseEvent) {
  const containerBounding = _containerRef.current?.getBoundingClientRect();
  if (!containerBounding) return;

  const centerX = containerBounding.left + containerBounding.width / 2;
  const centerY = containerBounding.top + containerBounding.height / 2;
  const x = event.clientX;
  const y = event.clientY;
  
  const angleRad = Math.atan2(centerY - y, centerX - x);
  let angleDeg = (angleRad * 180) / Math.PI;
  const minRotation = 50;
  const maxRotation = 130;
  const midRotation = -90;

  // 归一化角度到 [-180, 180]
  angleDeg = ((angleDeg + 180) % 360) - 180;

  // 判断角度是否在有效弧形范围内
  const isInValidRange = 
    (angleDeg >= minRotation && angleDeg <= 180) || 
    (angleDeg >= -180 && angleDeg <= maxRotation);

  if (!isInValidRange) {
    // 计算到两个边界的顺时针距离，取更近的边界
    const distToMin = angleDeg >= minRotation
      ? angleDeg - minRotation
      : (360 - minRotation) + (angleDeg + 180);
    const distToMax = angleDeg <= maxRotation
      ? maxRotation - angleDeg
      : (maxRotation + 180) + (360 - (angleDeg + 180));
    
    angleDeg = distToMin < distToMax ? minRotation : maxRotation;
  }

  if (_containerRef.current) {
    _containerRef.current.style.transform = `rotate(${angleDeg}deg)`;
  }
}

测试验证 #

用你给出的核心对应关系测试：

• angleToValue({degree:50, min:6, max:36}) → 返回6
• angleToValue({degree:-90, min:6, max:36}) → 返回21
• angleToValue({degree:130, min:6, max:36}) → 返回36
• valueToAngle({value:6, min:6, max:36}) → 返回50
• valueToAngle({value:21, min:6, max:36}) → 返回-90
• valueToAngle({value:36, min:6, max:36}) → 返回130

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