Flutter问题：高分辨率图片上CustomPainter缩放叠加后位置错位

核心问题是你记录的是窗口坐标系的坐标，而非图片原始尺寸的坐标系，且没考虑窗口大小变化时图片自身的适配缩放。以下是具体解决步骤：

1. 预加载图片获取原始尺寸 #

先异步加载图片，拿到它的原始宽高（5000×4000），这是坐标转换的基准：

late Image _originalImage;
double _originalWidth = 0;
double _originalHeight = 0;

@override
void initState() {
  super.initState();
  // 预加载asset图片
  final imageProvider = AssetImage('assets/your_image.png');
  final stream = imageProvider.resolve(createLocalImageConfiguration(context));
  stream.addListener(ImageStreamListener((info, _) {
    setState(() {
      _originalImage = info.image;
      _originalWidth = _originalImage.width.toDouble();
      _originalHeight = _originalImage.height.toDouble();
    });
  }));
}

2. 计算图片在InteractiveViewer中的适配缩放与偏移 #

当窗口大小变化时，Image组件会根据fit模式（比如BoxFit.contain）自动缩放，需要算出当前显示的图片相对于原始尺寸的缩放因子，以及在视图中的偏移：

// 获取当前Image组件的渲染信息
RenderBox? imageRenderBox = _imageKey.currentContext?.findRenderObject() as RenderBox?;
if (imageRenderBox == null || _originalWidth == 0) return;

// 图片显示区域的尺寸
final Size displaySize = imageRenderBox.size;
// 计算适配后的缩放因子（BoxFit.contain模式）
double scale = min(displaySize.width / _originalWidth, displaySize.height / _originalHeight);
// 图片在显示区域内的偏移（居中时）
Offset imageOffset = Offset(
  (displaySize.width - _originalWidth * scale) / 2,
  (displaySize.height - _originalHeight * scale) / 2,
);

注意：如果用的是其他fit模式（比如BoxFit.fill），缩放和偏移的计算逻辑要对应调整。

3. 结合TransformationController转换光标坐标到原始图片坐标系 #

InteractiveViewer的TransformationController记录的是手势对child的变换，我们需要先把光标本地坐标转换到InteractiveViewer的child坐标系，再转换到图片原始坐标系：

final TransformationController _transformationController = TransformationController();
final GlobalKey _imageKey = GlobalKey();

// 处理手势事件（比如onPanUpdate）
void _handlePanUpdate(DragUpdateDetails details) {
  if (_originalWidth == 0) return;

  // 1. 获取光标在InteractiveViewer父组件中的本地坐标
  Offset localPos = details.localPosition;

  // 2. 转换到InteractiveViewer的child坐标系（逆变换手势矩阵）
  Matrix4 inverseMatrix = Matrix4.inverted(_transformationController.value);
  Offset childPos = MatrixUtils.transformPoint(inverseMatrix, localPos);

  // 3. 获取图片的适配缩放和偏移
  RenderBox? imageRenderBox = _imageKey.currentContext?.findRenderObject() as RenderBox?;
  if (imageRenderBox == null) return;
  Size displaySize = imageRenderBox.size;
  double scale = min(displaySize.width / _originalWidth, displaySize.height / _originalHeight);
  Offset imageOffset = Offset(
    (displaySize.width - _originalWidth * scale) / 2,
    (displaySize.height - _originalHeight * scale) / 2,
  );

  // 4. 转换到图片原始坐标系
  Offset originalPos = Offset(
    (childPos.dx - imageOffset.dx) / scale,
    (childPos.dy - imageOffset.dy) / scale,
  );

  // 现在originalPos就是图片原始5000×4000坐标系下的坐标，直接保存到数据库即可
  _saveDrawingPoint(originalPos);
}

4. 绘制时逆向转换坐标 #

从数据库读取原始坐标后，绘制时需要转换回当前窗口的显示坐标：

@override
void paint(Canvas canvas, Size size) {
  // 同样计算当前图片的适配缩放和偏移
  RenderBox? imageRenderBox = _imageKey.currentContext?.findRenderObject() as RenderBox?;
  if (imageRenderBox == null || _originalWidth == 0) return;
  Size displaySize = imageRenderBox.size;
  double scale = min(displaySize.width / _originalWidth, displaySize.height / _originalHeight);
  Offset imageOffset = Offset(
    (displaySize.width - _originalWidth * scale) / 2,
    (displaySize.height - _originalHeight * scale) / 2,
  );

  // 应用InteractiveViewer的变换
  canvas.save();
  canvas.transform(_transformationController.value.storage);

  // 遍历原始坐标，转换后绘制
  for (var point in _savedPoints) {
    Offset displayPoint = Offset(
      point.dx * scale + imageOffset.dx,
      point.dy * scale + imageOffset.dy,
    );
    // 绘制逻辑，比如画点或线
    canvas.drawCircle(displayPoint, 2, _paint);
  }
  canvas.restore();
}

关键注意点 #

• 确保InteractiveViewer的child是带GlobalKey的Image组件，方便获取渲染信息：

  InteractiveViewer(
    transformationController: _transformationController,
    child: Image(
      key: _imageKey,
      image: AssetImage('assets/your_image.png'),
      fit: BoxFit.contain, // 根据你的需求选择fit模式
    ),
  )
  

• 窗口大小变化时，要重新计算缩放和偏移，建议在WidgetsBinding.instance.addPostFrameCallback或LayoutBuilder中监听尺寸变化。

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