Flutter中如何获取图片特定位置的X轴和Y轴坐标值

实现思路 #

通过GestureDetector监听点击事件，结合GlobalKey获取容器的布局信息，将点击的全局坐标转换为以图片指定角落为原点的相对坐标。

完整代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<ImageCoordinatePicker> createState() => _ImageCoordinatePickerState();
}

class _ImageCoordinatePickerState extends State<ImageCoordinatePicker> {
  // 用于获取容器布局信息的全局Key
  final GlobalKey _containerKey = GlobalKey();
  String _coordinateText = '点击图片获取坐标';
  // 图片左上角在容器内的偏移量（即原点(0,0)的位置）
  Offset? _imageOrigin;

  @override
  void initState() {
    super.initState();
    // 布局完成后计算图片在容器内的实际位置
    WidgetsBinding.instance.addPostFrameCallback((_) => _getImageOrigin());
  }

  void _getImageOrigin() {
    final RenderBox containerRenderBox =
        _containerKey.currentContext!.findRenderObject() as RenderBox;
    final containerSize = containerRenderBox.size;

    // 替换成你自己图片的原始宽高
    const imageOriginalWidth = 800.0;
    const imageOriginalHeight = 600.0;

    // 计算图片在容器内的显示尺寸（以BoxFit.contain为例）
    final scale = containerSize.width / imageOriginalWidth > containerSize.height / imageOriginalHeight
        ? containerSize.height / imageOriginalHeight
        : containerSize.width / imageOriginalWidth;
    final imageDisplayWidth = imageOriginalWidth * scale;
    final imageDisplayHeight = imageOriginalHeight * scale;

    // 计算图片左上角在容器内的偏移（容器居中时）
    final offsetX = (containerSize.width - imageDisplayWidth) / 2;
    final offsetY = (containerSize.height - imageDisplayHeight) / 2;

    setState(() => _imageOrigin = Offset(offsetX, offsetY));
  }

  void _onImageTapDown(TapDownDetails details) {
    if (_imageOrigin == null) return;

    // 将点击的全局坐标转换为容器内的相对坐标
    final RenderBox containerRenderBox =
        _containerKey.currentContext!.findRenderObject() as RenderBox;
    final localPosition = containerRenderBox.globalToLocal(details.globalPosition);

    // 转换为以图片左上角为(0,0)的坐标
    final imageRelativePos = localPosition - _imageOrigin!;

    setState(() {
      _coordinateText = 'X: ${imageRelativePos.x.toStringAsFixed(2)}, Y: ${imageRelativePos.y.toStringAsFixed(2)}';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('图片坐标拾取')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              key: _containerKey,
              width: 300,
              height: 300,
              color: Colors.grey[200],
              child: GestureDetector(
                onTapDown: _onImageTapDown,
                child: Image.asset(
                  'assets/your_image.png', // 替换成你的图片路径
                  fit: BoxFit.contain, // 根据需求调整图片适配方式
                ),
              ),
            ),
            const SizedBox(height: 20),
            Text(_coordinateText, style: const TextStyle(fontSize: 18)),
          ],
        ),
      ),
    );
  }
}

关键说明 #

1. GlobalKey的使用：通过它获取容器的RenderBox，从而拿到容器的尺寸和位置信息，实现坐标转换。
2. 布局完成后计算原点：用addPostFrameCallback确保在布局渲染完成后再计算图片的位置，避免获取到无效的尺寸数据。
3. 坐标转换：
   • 先将点击的全局坐标转为容器内的相对坐标（globalToLocal）。
   • 减去图片左上角在容器内的偏移量，得到以图片左上角为(0,0)的目标坐标。
4. 适配不同的BoxFit：如果使用BoxFit.fill、BoxFit.cover等其他适配方式，需要对应调整图片显示尺寸和偏移量的计算逻辑。

注意事项 #

• 替换代码中的图片路径和原始宽高为你实际使用的图片信息。
• 如果是网络图片，需要在图片加载完成后获取原始尺寸，可以通过ImageProvider.resolve方法实现。

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