OpenSeadragon画布旋转后选区旋转异常问题求助

我之前也碰到过类似的OpenSeadragon搭配Picturae selection插件的旋转异常问题，结合你的场景和代码，给你梳理下问题根源和可行的解决办法：

问题回顾 #

你当前用OpenSeadragon开发图像查看器，借助Picturae selection插件实现裁剪功能。图像未旋转时选区完全正常，但旋转图像后，选区会绕左下角而非自身中心旋转，行为不符合预期。你也提供了演示案例，能直观看到正常与异常的对比。

你初始化选区的代码如下：

var selection = viewer.selection({ 
  element: null, // html element to use for overlay 
  showSelectionControl: true, // show button to toggle selection mode 
  toggleButton: null, // dom element to use as toggle button 
  showConfirmDenyButtons: true, 
  styleConfirmDenyButtons: true, 
  returnPixelCoordinates: true, 
  keyboardShortcut: 'c', // key to toggle selection mode 
  rect: null, // initial selection as an OpenSeadragon.SelectionRect object 
  startRotated: false, // alternative method for drawing the selection; useful for rotated crops 
  startRotatedHeight: 0.1, // only used if startRotated=true; value is relative to image height 
  restrictToImage: true, // true = do not allow any part of the selection to be outside the image 
  onSelection: function(rect) { 
    viewer_crop_download(rect); 
  }, 
  cancel : function(){ 
    viewer_crop_disable(); 
  }, 
  prefixUrl: PREFIX_URL, 
  navImages: { 
    selection: { 
      REST: 'selection_rest.png', 
      GROUP: 'selection_grouphover.png', 
      HOVER: 'selection_hover.png', 
      DOWN: 'selection_pressed.png' 
    }, 
    selectionConfirm: { 
      REST: 'selection_confirm_rest.png', 
      GROUP: 'selection_confirm_grouphover.png', 
      HOVER: 'selection_confirm_hover.png', 
      DOWN: 'selection_confirm_pressed.png' 
    }, 
    selectionCancel: { 
      REST: 'selection_cancel_rest.png', 
      GROUP: 'selection_cancel_grouphover.png', 
      HOVER: 'selection_cancel_hover.png', 
      DOWN: 'selection_cancel_pressed.png' 
    }, 
  } 
}); 

问题根源 #

这个异常的核心原因是：插件默认以图像的左下角（OpenSeadragon的坐标系原点）作为旋转变换的原点，而没有计算选区自身的中心作为旋转支点，导致旋转时选区偏离预期位置。

可行解决方案 #

方案1：启用插件的旋转裁剪模式 #

你当前初始化时设置了startRotated: false，这个参数正是插件为旋转场景设计的特殊模式。尝试将其改为true，大概率能直接修复旋转原点的问题：

var selection = viewer.selection({ 
  // 保留其他所有参数
  startRotated: true, // 开启旋转适配的裁剪模式
  startRotatedHeight: 0.1,
  // ... 其余参数不变
}); 

这个模式下，插件会自动处理旋转时的选区中心对齐，是最简便的解决方式。

方案2：监听旋转事件手动修正选区位置 #

如果方案1不生效，或者你需要保留原有模式，可以通过监听OpenSeadragon的rotate事件，手动计算并修正选区的位置，确保旋转时以自身中心为原点：

// 给viewer添加旋转事件监听
viewer.addHandler('rotate', function(event) {
  // 确保选区已初始化且存在
  if (!selection || !selection.getSelection()) return;

  const currentRect = selection.getSelection();
  // 计算当前选区的中心坐标
  const centerPoint = new OpenSeadragon.Point(
    currentRect.x + currentRect.width / 2,
    currentRect.y + currentRect.height / 2
  );

  // 使用OpenSeadragon的Matrix工具，以选区中心为原点应用旋转变换
  const rotationMatrix = new OpenSeadragon.Matrix()
    .rotate(event.angle, centerPoint.x, centerPoint.y);
  // 变换原选区得到新的选区边界
  const newRotatedRect = currentRect.transform(rotationMatrix);

  // 更新选区到新的位置
  selection.setSelection(newRotatedRect);
});

方案3：修改插件源码（进阶） #

如果你有能力修改Picturae selection插件的源码，可以找到处理选区旋转的逻辑部分，将旋转原点从图像左下角改为选区中心。核心思路是：

1. 计算选区的中心坐标centerX = rect.x + rect.width/2，centerY = rect.y + rect.height/2
2. 在应用CSS旋转变换时，先将选区平移到中心，旋转后再平移回原位，示例伪代码：

// 找到插件中设置选区transform的代码，替换为类似逻辑
const centerX = selectionRect.x + selectionRect.width / 2;
const centerY = selectionRect.y + selectionRect.height / 2;
selectionElement.style.transform = `translate(${centerX}px, ${centerY}px) rotate(${currentRotation}deg) translate(${-centerX}px, ${-centerY}px)`;

测试建议 #

修改后记得测试以下场景：

• 不同旋转角度下的选区创建、拖拽、缩放功能
• 确认选区旋转时始终以自身中心为支点
• 测试确认裁剪后的图像坐标是否仍正确

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