如何通过TransformationController让InteractiveViewer以当前视口中心放大

你的问题出在直接重置矩阵为Matrix4.identity()..scale()，这会清除之前的平移偏移，导致视图跳回左上角。要实现以当前视口中心为基准的缩放，需要结合平移和缩放的矩阵变换，确保缩放前后视口中心在屏幕上的位置不变。

实现步骤与代码 #

1. 给InteractiveViewer添加GlobalKey，用于获取其视口尺寸
2. 在缩放逻辑中，计算当前视口中心对应的内容坐标
3. 基于目标缩放比例，调整平移偏移，保持中心位置不变

完整代码示例：

import 'package:flutter/material.dart';

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

  @override
  State<ZoomDemo> createState() => _ZoomDemoState();
}

class _ZoomDemoState extends State<ZoomDemo> {
  final _transformationController = TransformationController();
  final _interactiveViewerKey = GlobalKey();

  void _zoomIn() {
    final currentMatrix = _transformationController.value;
    final currentScale = currentMatrix.getMaxScaleOnAxis();
    final targetScale = currentScale * 1.1;

    // 获取InteractiveViewer的视口尺寸
    final renderObject = _interactiveViewerKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderObject == null) return;
    final viewportSize = renderObject.size;

    // 计算当前屏幕视口中心对应的内容坐标系位置
    final viewportCenter = Offset(viewportSize.width / 2, viewportSize.height / 2);
    final contentCenter = (viewportCenter - Offset(currentMatrix[12], currentMatrix[13])) / currentScale;

    // 计算缩放后的新偏移量，保证内容中心仍在屏幕中心
    final newOffset = viewportCenter - contentCenter * targetScale;

    // 构建新的变换矩阵
    final newMatrix = Matrix4.identity()
      ..translate(newOffset.dx, newOffset.dy)
      ..scale(targetScale);

    _transformationController.value = newMatrix;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('中心缩放示例')),
      body: Column(
        children: [
          ElevatedButton(onPressed: _zoomIn, child: const Text('放大')),
          Expanded(
            child: InteractiveViewer(
              key: _interactiveViewerKey,
              transformationController: _transformationController,
              clipBehavior: Clip.none,
              child: Image.asset('assets/your_image.png'), // 替换为你的图片路径
            ),
          ),
        ],
      ),
    );
  }
}

关键逻辑说明 #

• 视口中心计算：通过GlobalKey获取InteractiveViewer的渲染对象，得到屏幕上的视口尺寸，进而算出视口中心坐标。
• 内容坐标转换：将屏幕视口中心转换为内容坐标系中的位置（去除当前平移和缩放的影响）。
• 偏移量调整：根据目标缩放比例，重新计算平移偏移，确保缩放后原内容中心依然落在屏幕视口中心。

额外注意 #

• 如果需要限制缩放范围，可在计算targetScale时添加边界判断（比如不超过最大缩放值）。
• 确保InteractiveViewer渲染完成后再触发缩放操作，避免renderObject为空的情况。

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