如何将图片旋转的弧度值转换为0-360范围内的固定角度值

原代码已实现图片拖拽旋转功能，要获取从初始0度开始的累计旋转角度并限定在0-360范围内，只需调整角度转换逻辑，确保旋转角度基于初始状态累计且归一化到目标区间。

修改后的完整代码 #

HTML部分 #

<body>
  <span>
    <img class="rotate" id="img01" src="wheel.png" alt="image" />
  </span>
</body>

JavaScript部分 #

const rotate = (EL) => {

  let ang = 0; // 累计旋转的弧度值
  let angStart = 0;
  let isStart = false;

  const angXY = (ev) => {
    const bcr = EL.getBoundingClientRect();
    const radius = bcr.width / 2;
    const { clientX, clientY } = ev.touches ? ev.touches[0] : ev;
    const y = clientY - bcr.top - radius;  // 相对于图片中心的y坐标
    const x = clientX - bcr.left - radius; // 相对于图片中心的x坐标
    return Math.atan2(y, x);
  };

  const mousedown = (ev) => {
    isStart = true;
    angStart = angXY(ev) - ang;
  };

  const mousemove = (ev) => {
    if (!isStart) return;
    ev.preventDefault();
    ang = angXY(ev) - angStart;
    EL.style.transform = `rotateZ(${ang}rad)`;
    // 实时获取归一化后的角度
    const normalizedDeg = getNormalizedDegrees(ang);
    console.log('当前旋转角度（0-360）:', normalizedDeg);
  };

  const mouseup = () => {
    const normalizedDeg = getNormalizedDegrees(ang);
    console.log('旋转结束，最终角度（0-360）:', normalizedDeg);
    isStart = false;
  };

  EL.addEventListener("mousedown", mousedown);
  document.addEventListener("mousemove", mousemove);
  document.addEventListener("mouseup", mouseup);
};

// 将弧度转换为0-360范围内的角度（基于初始0度累计）
function getNormalizedDegrees(ang) {
  // 弧度转角度，调整坐标系：Math.atan2的0度指向右，图片默认0度向上，需偏移修正
  let deg = (ang * 180 / Math.PI) * -1 + 90;
  // 归一化到0-360区间，处理正负角度和多圈旋转情况
  deg = ((deg % 360) + 360) % 360;
  return Math.round(deg); // 可选：取整避免小数，按需调整
}

document.querySelectorAll(".rotate").forEach(rotate);

关键修改说明 #

• 坐标系修正：Math.atan2(y, x)的0度方向为向右，而图片默认0度旋转方向为向上，通过(ang * 180 / Math.PI) * -1 + 90调整角度起点，让初始状态对应0度。
• 0-360归一化：使用((deg % 360) + 360) % 360处理正负角度，无论顺时针/逆时针旋转多少圈，最终角度都落在0-360区间内。
• 实时角度获取：在mousemove中可实时获取当前旋转角度，mouseup中获取最终角度，满足多次旋转后的累计角度需求。

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