旋转导致可拖动可调整大小的div功能异常问题求助

数据老陈

2026-8-20

问题：旋转后可缩放div的顶部/左侧调整点位移修复方案

我正在开发一个具备可移动、拖拽、调整大小及旋转功能的div组件。目前底部和右侧的调整点在旋转状态下能正常工作，但顶部和左侧调整点调整大小时，旋转后的div会发生位移，暂时没有解决思路，也没找到合适方案。

核心解决思路：

坐标空间转换
旋转后元素的局部坐标系与页面全局坐标系存在夹角，调整大小时必须将鼠标的全局坐标通过逆旋转矩阵转换为元素的局部坐标。具体步骤：先计算鼠标相对于元素中心点的全局偏移量，再用旋转角度θ的逆矩阵（即旋转-θ）转换该偏移量，得到未旋转状态下的局部偏移，以此为基础计算宽高和位置变化，避免因坐标系错位导致的位移。
以中心点为定位基准
放弃以元素左上角为调整基准的逻辑，改为以元素中心点作为定位锚点。调整大小时，先根据局部坐标计算新的宽高，再结合旋转角度反推元素左上角的新位置：新位置 = 中心点坐标 ± (新宽高/2 - 原宽高/2) 经过旋转后的偏移量，确保调整过程中元素整体位置不会偏移。
适配旋转角度的调整逻辑
顶部/左侧调整点的默认逻辑是反向修改尺寸（如顶部调整时减小高度并上移元素），但旋转后“反向”的物理方向已改变。需要根据当前旋转角度，重新映射调整点对应的尺寸修改方向和位置偏移：比如旋转90度后，原顶部调整点实际对应未旋转状态下的右侧调整逻辑，需动态调整计算规则。
规范transform顺序
确保元素的transform-origin保持为50% 50%（中心点），并且transform属性的顺序为先translate再rotate。若先旋转后平移，会导致平移方向跟随旋转后的坐标系，容易引发意外位移；调整大小时，先基于局部坐标计算新的translate值，再叠加rotate状态，保证渲染逻辑的一致性。