如何在旋转元素时调整jQuery Resize手柄的坐标轴？

问题说明 #

使用jQuery UI的resizable和draggable功能时，元素在正常状态下拖拽、调整大小都能正常工作，但给元素添加transform: rotate(90deg)（或任意角度）后，调整大小的手柄不会跟随元素旋转同步改变坐标轴，导致无法正确对旋转后的元素进行调整操作。

原测试代码如下：

<div class="main">
  <img src="https://tinypng.com/images/social/website.jpg" />
</div>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<style>
.main {
  width: 400px;
  height: 400px;
  /* transform:rotate(90deg); */
  & img {
    width:100%;
    height:100%;
  }
}
</style>

<script>
function dragger() {
  $(".main").draggable({
      cursor: "move"
    });

    $(".main").resizable({
      handles: "n, e, s, w, se, ne",
     });
}

dragger();
</script>

问题原因 #

jQuery UI的resizable组件是基于元素原始的坐标系计算手柄位置和拖拽逻辑的，不会自动识别CSS transform带来的旋转变换，因此手柄的交互逻辑始终基于未旋转的坐标轴，和旋转后的元素视觉方向错位。

解决方案 #

方案1：手动适配旋转角度，调整手柄样式和resize逻辑 #

针对固定旋转角度，我们可以反向旋转手柄使其视觉匹配元素方向，同时在resize事件中互换宽高的计算逻辑，适配旋转后的尺寸调整：

<div class="main">
  <img src="https://tinypng.com/images/social/website.jpg" />
</div>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<style>
.main {
  width: 400px;
  height: 400px;
  transform: rotate(90deg);
  position: relative;
  & img {
    width: 100%;
    height: 100%;
  }
}
/* 反向旋转手柄，使其与元素方向一致 */
.ui-resizable-handle {
  transform: rotate(-90deg);
}
</style>

<script>
function dragger() {
  $(".main").draggable({
      cursor: "move"
    });

    $(".main").resizable({
      handles: "n, e, s, w, se, ne",
      resize: function(event, ui) {
        // 适配90度旋转：互换宽高计算逻辑，修正位置偏移
        const tempWidth = ui.size.width;
        ui.size.width = ui.size.height;
        ui.size.height = tempWidth;
        
        ui.position.left = ui.position.left - (ui.size.width - ui.originalSize.width)/2;
        ui.position.top = ui.position.top - (ui.size.height - ui.originalSize.height)/2;
      }
     });
}

dragger();
</script>

如果是其他旋转角度，需要额外计算三角函数来调整尺寸和位置，逻辑会更复杂。

方案2：旋转内部内容而非目标元素 #

不旋转resizable绑定的.main元素，转而旋转内部的图片，这样.main的坐标系保持不变，手柄就能正常工作，同时视觉上元素是旋转状态：

<div class="main">
  <img src="https://tinypng.com/images/social/website.jpg" class="rotated-img" />
</div>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<style>
.main {
  width: 400px;
  height: 400px;
  position: relative;
}
.rotated-img {
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
  transform-origin: center; /* 以中心为旋转原点 */
}
</style>

<script>
function dragger() {
  $(".main").draggable({
      cursor: "move"
    });

    $(".main").resizable({
      handles: "n, e, s, w, se, ne",
     });
}

dragger();
</script>

这种方案无需修改resize逻辑，适合只需要旋转内部内容的场景。

方案3：使用支持旋转的扩展插件 #

可以使用第三方扩展插件（如jquery-ui-resizable-rotatable），这类插件已经内置了对旋转元素的适配，能自动同步手柄坐标轴和元素旋转角度，简化开发。

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