Flutter：图片缩放时如何映射鼠标位置/坐标

核心思路 #

要让缩放后的点击坐标正确对应到原图位置，关键是把屏幕点击坐标转换为原图相对坐标。只要绘制时基于原图坐标操作，不管图片缩放、平移多少次，绘制内容都会固定在原图的对应位置，取消缩放后也不会错位。需要跟踪当前图片的缩放比例和平移偏移，再通过坐标变换公式完成映射。

具体实现步骤 #

1. 跟踪缩放与平移状态
   用TransformationController配合InteractiveViewer，获取当前图片的变换矩阵，从中提取缩放比例和平移偏移量。
2. 坐标转换逻辑
   • 把点击的全局坐标转为图片组件的局部坐标，消除父组件布局偏移的干扰。
   • 用公式计算原图坐标：原图坐标 = (局部坐标 - 平移偏移) / 缩放比例

代码示例 #

// 初始化控制器
final TransformationController _transformationController = TransformationController();
final FlutterPainterController _flutterPainterController = FlutterPainterController();

// 布局部分
InteractiveViewer(
  transformationController: _transformationController,
  boundaryMargin: const EdgeInsets.all(double.infinity),
  child: GestureDetector(
    onSecondaryTapUp: (details) {
      // 1. 将全局点击坐标转为图片局部坐标
      final renderBox = context.findRenderObject() as RenderBox;
      final localPosition = renderBox.globalToLocal(details.globalPosition);

      // 2. 从变换矩阵提取缩放比例和平移偏移
      final matrix = _transformationController.value;
      final scale = matrix.getMaxScaleOnAxis(); // 取x/y方向一致的缩放比例
      final translateOffset = Offset(matrix.getTranslation().x, matrix.getTranslation().y);

      // 3. 计算对应原图的坐标
      final originalPosition = (localPosition - translateOffset) / scale;

      // 4. 基于原图坐标执行绘制
      _flutterPainterController.addShape(
        CircleShape(
          position: originalPosition,
          radius: 10,
          paint: Paint()..color = Colors.red,
        ),
      );
    },
    child: FlutterPainter(
      controller: _flutterPainterController,
      image: const AssetImage('assets/your_image.png'), // 替换为你的图片资源
    ),
  ),
)

注意事项 #

• 如果是自定义缩放逻辑（不用InteractiveViewer），只需自行维护scale和translateOffset变量，坐标转换公式保持不变。
• 给InteractiveViewer设置足够大的boundaryMargin，避免缩放时图片被边界限制，影响坐标计算的准确性。

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