jQuery UI Rotatable元素缩放后旋转异常问题求助

当浏览器页面缩放比例偏离100%时，jQuery UI Rotatable插件的旋转计算会因为鼠标坐标的缩放偏移出现偏差，导致旋转功能失效。核心解决思路是获取页面当前缩放比例，修正旋转计算时的鼠标坐标或角度增量。

完整修复代码 #

// 获取页面当前缩放比例的辅助函数
function getZoomFactor() {
  let zoom = 1;
  // 优先使用devicePixelRatio（webkit内核浏览器）
  if (window.devicePixelRatio) {
    zoom = window.devicePixelRatio;
  } else if (document.documentElement.getBoundingClientRect) {
    // 兼容非webkit浏览器，通过元素物理宽度/逻辑宽度计算缩放
    const rect = document.documentElement.getBoundingClientRect();
    const physicalWidth = rect.width;
    const logicalWidth = document.documentElement.clientWidth;
    zoom = physicalWidth / logicalWidth;
  }
  return zoom;
}

// 初始化可旋转元素
$('#target').rotatable({
  angle: false,        
  wheelRotate: true,   
  start: function(event, ui) {
    // 旋转开始时记录当前缩放比例与初始角度
    ui.zoomFactor = getZoomFactor();
    ui.startAngle = ui.angle;
    // 记录鼠标初始偏移角度（修正缩放影响）
    const deltaX = event.pageX - ui.center.left;
    const deltaY = event.pageY - ui.center.top;
    ui.startOffset = Math.atan2(deltaY / ui.zoomFactor, deltaX / ui.zoomFactor) * (180 / Math.PI) - ui.startAngle;
  },  
  rotate: function(event, ui) {
    const zoomFactor = ui.zoomFactor || getZoomFactor();
    
    // 区分鼠标拖拽旋转和滚轮旋转
    if (event.type.includes('mousewheel') || event.type === 'DOMMouseScroll') {
      // 修正滚轮旋转的角度增量
      const delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
      ui.angle = ui.startAngle + (delta > 0 ? 5 : -5) / zoomFactor;
    } else {
      // 修正鼠标拖拽的坐标，重新计算旋转角度
      const deltaX = event.pageX - ui.center.left;
      const deltaY = event.pageY - ui.center.top;
      const correctedX = deltaX / zoomFactor;
      const correctedY = deltaY / zoomFactor;
      ui.angle = Math.atan2(correctedY, correctedX) * (180 / Math.PI) - ui.startOffset;
    }
    
    // 手动应用修正后的旋转角度
    $(this).css('transform', `rotate(${ui.angle}deg)`);
  },  
  stop: function(event, ui) {
    // 可选：保存最终旋转角度，方便后续复用
    $(this).data('rotatedAngle', ui.angle);
  }
});

代码说明 #

1. getZoomFactor函数：兼容不同浏览器获取页面缩放比例，覆盖webkit（Chrome、Edge）和非webkit（Firefox等）场景。
2. start回调：旋转开始时记录关键参数，包括当前缩放比例、初始角度，以及修正后的鼠标初始偏移角度，确保后续计算基准正确。
3. rotate回调：
   • 针对鼠标拖拽：将鼠标坐标除以缩放比例，还原到100%缩放时的逻辑坐标，再重新计算旋转角度。
   • 针对滚轮旋转：将角度增量除以缩放比例，避免缩放时滚轮旋转速度异常。
4. 手动应用transform：覆盖插件的默认角度计算，确保修正后的角度直接作用于元素。

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