如何处理旋转元素的缩放问题？InteractJS技术求助

问题核心 #

旋转后的元素在缩放时，InteractJS默认基于轴对齐的边界框计算偏移和尺寸，和视觉上的旋转元素坐标系不匹配，导致位置偏移、尺寸变化不符合预期。

易懂的解决方案 #

只需两步修正：让InteractJS识别元素的旋转角度，同时把轴对齐的偏移量转换为旋转后元素的坐标系偏移。

修改后的完整代码 #

CSS

.resize-drag {
  background-color: #29e;
  color: white;
  font-size: 13px;
  font-family: sans-serif;
  border-radius: 8px;
  padding: 20px;
  margin: 30px 20px;
  text-align: center;
  width: 120px;
  /* 将旋转合并到transform中，统一管理变换顺序 */
  transform: translate(0, 0) rotate(1.2rad);
  transform-origin: center center; /* 确保旋转/缩放基于元素中心 */
  box-sizing: border-box;
}

.resize-container {
  width: 240px;
  height: 240px;
  background: #ccc;
}

JavaScript

// 预先定义元素的旋转角度（单位：弧度）
const rotationRad = 1.2;
// 提前计算旋转的余弦/正弦值，避免重复计算
const cos = Math.cos(rotationRad);
const sin = Math.sin(rotationRad);

interact('.resize-drag')
  .resizable({
    preserveAspectRatio: true,
    edges: { left: true, right: true, bottom: true, top: true },
    // 告诉InteractJS元素的旋转角度，让它基于旋转后的坐标系计算参数
    getRect: element => {
      const rect = element.getBoundingClientRect();
      return {
        x: rect.left,
        y: rect.top,
        width: rect.width,
        height: rect.height,
        rotation: rotationRad
      };
    }
  })
  .on('resizemove', event => {
    const target = event.target;
    let x = parseFloat(target.getAttribute('data-x')) || 0;
    let y = parseFloat(target.getAttribute('data-y')) || 0;
    const { width, height } = event.rect;
    const { left: deltaLeft, top: deltaTop } = event.deltaRect;

    // 将轴对齐的偏移量转换为旋转后元素坐标系的偏移
    const rotatedDeltaX = deltaLeft * cos + deltaTop * sin;
    const rotatedDeltaY = deltaTop * cos - deltaLeft * sin;

    // 更新位置、尺寸和变换
    x += rotatedDeltaX;
    y += rotatedDeltaY;
    target.style.width = `${width}px`;
    target.style.height = `${height}px`;
    target.style.transform = `translate(${x}px, ${y}px) rotate(${rotationRad}rad)`;

    // 保存最新位置数据
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
    target.textContent = `${Math.round(width)}×${Math.round(height)}`;
  });

HTML（无需修改）

<script src="https://cdn.jsdelivr.net/interact.js/1.2.6/interact.min.js"></script>
<div class="resize-container">
  <div class="resize-drag">
     Resize from any edge or corner
  </div>
</div>

关键修正点说明 #

1. 统一变换管理：把rotate属性合并到transform中，确保浏览器先执行平移、再绕中心旋转，变换顺序符合预期。
2. 告知旋转角度：通过getRect方法给InteractJS传递元素的旋转角度，让它能正确计算旋转后的边界框和缩放参数。
3. 偏移量坐标系转换：用提前计算好的余弦/正弦值，把InteractJS给出的轴对齐偏移量，转换成旋转后元素的坐标系偏移，解决位置乱跑的问题。

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