如何通过Matrix4实现InteractiveViewer旋转时保留缩放与平移位置

嘿，我完全懂你遇到的这个问题——先缩放平移图片到边缘，转90度再转回来，位置居然跑偏了，这确实挺烦人的。不用RotatedBox，单纯用Matrix4其实是可以搞定的，咱们一步步来捋清楚。

为什么你的原始代码会出问题？ #

你之前的代码每次旋转时都会把矩阵重置为Matrix4.identity()，然后只重新应用了缩放和旋转，完全丢掉了用户之前的平移操作。而且你是绕着屏幕中心旋转的，当图片已经被平移到边缘时，屏幕中心和图片的实际中心已经不重合了，旋转后自然就会出现位置偏移。

要解决这个问题，关键是要保留用户的缩放和平移状态，并且绕着图片的实际中心（而不是屏幕中心）来旋转。

解决方案：拆分变换参数，重新构建矩阵 #

我们可以把InteractiveViewer的矩阵变换拆成三个独立的参数：缩放比例、平移量、旋转角度。每次用户操作后，从矩阵中提取这三个参数；旋转时，基于这些参数重新构建矩阵，确保平移位置相对于图片自身保持不变。

完整代码示例

import 'dart:math';
import 'package:flutter/material.dart';

class ImageViewer extends StatefulWidget {
  const ImageViewer({super.key});

  @override
  State<ImageViewer> createState() => _ImageViewerState();
}

class _ImageViewerState extends State<ImageViewer> {
  final transformationController = TransformationController();
  double _currentRotation = 0.0; // 记录当前旋转角度（0/90/180/270）
  double _scale = 1.0; // 记录当前缩放比例
  Offset _offset = Offset.zero; // 记录无旋转时的平移量
  BoxConstraints? _constraints; // 保存容器约束

  @override
  void initState() {
    super.initState();
    // 监听变换控制器，实时更新参数
    transformationController.addListener(_updateTransformParams);
  }

  @override
  void dispose() {
    transformationController.removeListener(_updateTransformParams);
    transformationController.dispose();
    super.dispose();
  }

  // 从当前矩阵中拆分出缩放、平移、旋转参数
  void _updateTransformParams() {
    final matrix = transformationController.value;
    
    // 提取缩放比例
    _scale = matrix.getMaxScaleOnAxis();
    
    // 计算当前旋转角度（弧度转角度）
    _currentRotation = atan2(matrix[1], matrix[0]) * 180 / pi;
    
    // 构建逆矩阵，抵消旋转和缩放，得到无旋转时的原始平移量
    final inverseRotation = Matrix4.rotationZ(-_currentRotation * pi / 180);
    final inverseScale = Matrix4.diagonal3Values(1 / _scale, 1 / _scale, 1);
    final originalTransform = inverseScale.multiply(inverseRotation.multiply(matrix));
    
    // 提取平移量
    _offset = Offset(originalTransform.getTranslation().x, originalTransform.getTranslation().y);
  }

  // 旋转90度的方法
  void _rotate90Degrees() {
    if (_constraints == null) return;
    
    // 更新旋转角度（循环0/90/180/270）
    _currentRotation = (_currentRotation + 90) % 360;
    final radians = _currentRotation * pi / 180;
    final constraints = _constraints!;

    // 重新构建变换矩阵
    final newMatrix = Matrix4.identity()
      // 1. 平移到容器中心，作为旋转的原点
      ..translate(constraints.maxWidth / 2, constraints.maxHeight / 2)
      // 2. 应用旋转
      ..rotateZ(radians)
      // 3. 应用缩放
      ..scale(_scale)
      // 4. 应用原始平移（相对于图片自身的位置）
      ..translate(_offset.dx, _offset.dy)
      // 5. 平移回容器中心的反方向，恢复坐标系
      ..translate(-constraints.maxWidth / 2, -constraints.maxHeight / 2);

    transformationController.value = newMatrix;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('旋转保留位置演示')),
      body: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          AspectRatio(
            aspectRatio: 9 / 16,
            child: LayoutBuilder(
              builder: (context, constraints) {
                _constraints = constraints;
                return ClipRect(
                  child: SizedBox(
                    width: constraints.maxWidth,
                    height: constraints.maxHeight,
                    child: InteractiveViewer(
                      transformationController: transformationController,
                      minScale: 0.1,
                      constrained: false,
                      boundaryMargin: const EdgeInsets.all(100),
                      panAxis: PanAxis.aligned,
                      child: Image.network('https://picsum.photos/seed/picsum/200/300'),
                    ),
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 20),
            child: ElevatedButton(
              onPressed: _rotate90Degrees,
              child: const Text('旋转90°'),
            ),
          ),
        ],
      ),
    );
  }
}

代码工作原理 #

1. 参数监听：通过transformationController.addListener，每次用户缩放或平移后，我们都会从矩阵中分解出当前的缩放、平移和旋转参数，把复杂的矩阵运算拆成容易管理的独立变量。
2. 旋转逻辑：旋转时，我们先把坐标系平移到容器中心（作为旋转原点），应用旋转后，再把缩放和平移参数加回去，最后恢复坐标系。这样不管旋转多少次，平移的位置都是相对于图片自身的，不会因为旋转而跑偏。
3. 状态保留：因为我们始终维护着最新的缩放和平移参数，所以旋转后再转回来，图片会回到之前的位置，完全符合你的预期。

最后说两句 #

这种方法的核心是把矩阵变换拆解成可管理的独立参数，而不是直接操作原始矩阵。这样不仅能解决旋转位置偏移的问题，后续如果要添加其他变换操作（比如翻转），也会更容易扩展。

内容来源于stack exchange