Flutter可旋转缩放组件问题：旋转后缩放坐标异常求助

核心问题本质 #

旋转后你的Rect状态未同步组件的旋转变换，导致拖拽时仍使用未旋转的原始坐标系计算，从而出现缩放偏移。以下是具体解决思路：

思路1：通过矩阵转换修正拖拽坐标 #

维护组件的旋转角度状态，在拖拽时将全局指针位置逆旋转回未旋转的组件本地坐标系，再计算新的Rect：

• 记录当前旋转角度（如rotationAngle，单位弧度）
• 创建旋转矩阵并求逆，将全局坐标转换为未旋转的本地坐标
• 用转换后的坐标更新Rect

关键代码示例：

// 组件当前的偏移（左上角）和旋转角度
Offset currentOffset = Offset(rect.left, rect.top);
double rotationAngle = _rotation; // 假设这是你的旋转状态变量

// 构建旋转+平移的变换矩阵
Matrix4 transformMatrix = Matrix4.rotationZ(rotationAngle)
  ..translate(currentOffset.dx, currentOffset.dy);
// 求逆矩阵，用于将全局坐标转回未旋转的本地坐标
Matrix4 inverseMatrix = transformMatrix.inverted();

// 将拖拽时的全局指针位置转换为本地坐标
Offset localDragPoint = inverseMatrix.transform3(globalPointerPosition);
// 基于转换后的点计算新Rect（以左上角为例，其他角落逻辑类似）
Rect updatedRect = Rect.fromPoints(rect.topLeft, localDragPoint);

思路2：调整组件层级，让手柄随旋转同步 #

将Transform从Positioned内部移到外层，包裹整个包含组件和拖拽手柄的Stack。这样手柄会自动跟随组件旋转，无需单独处理手柄的位置偏移，同时拖拽时的坐标逻辑可以直接基于旋转后的坐标系处理。

结构调整示例：

Stack(
  children: [
    Transform.rotate(
      angle: _rotation,
      child: Stack(
        children: [
          // 目标组件
          Positioned.fromRect(
            rect: _currentRect,
            child: Container(color: Colors.blue),
          ),
          // 四个拖拽手柄（基于_currentRect定位）
          Positioned(
            left: _currentRect.left,
            top: _currentRect.top,
            child: DragHandle(onDrag: _handleTopLeftDrag),
          ),
          // 其他三个手柄...
        ],
      ),
    ),
  ],
)

思路3：实时获取旋转后的组件边界 #

通过GlobalKey获取组件的渲染对象，实时计算旋转后的实际边界，替代手动维护的Rect状态：

final GlobalKey _componentKey = GlobalKey();

// 在拖拽时获取旋转后的边界
RenderBox? renderBox = _componentKey.currentContext?.findRenderObject() as RenderBox?;
if (renderBox != null) {
  // 获取组件到全局坐标系的变换矩阵
  Matrix4 transform = renderBox.getTransformTo(null);
  // 组件原始大小
  Size size = renderBox.size;
  // 计算旋转后的四个顶点坐标，再生成新Rect
  Offset topLeft = transform.transform3(Offset.zero);
  Offset topRight = transform.transform3(Offset(size.width, 0));
  Offset bottomRight = transform.transform3(Offset(size.width, size.height));
  Offset bottomLeft = transform.transform3(Offset(0, size.height));
  Rect rotatedRect = Rect.fromPoints(topLeft, bottomRight);
}

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