Flutter：点击图像某处时如何获取像素颜色？

Question

Flutter：点击图片某处时如何获取像素颜色？

Answer 1

您可以use/add GestureDetector 作为堆栈的父级，并注册 onTapDownDetails 侦听器。这将在每次点击时调用监听器，并为您提供点击的偏移量。使用该事件侦听器的 TapDownDetail 参数。

您可以使用的代码：

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Popup Demo'),
        ),
        body: new MyWidget());
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyWidgetState();
  }
}

class MyWidgetState extends State<MyWidget> {
  double posx = 100.0;
  double posy = 100.0;

  void onTapDown(BuildContext context, TapDownDetails details) {
    print('${details.globalPosition}');
    final RenderBox box = context.findRenderObject();
    final Offset localOffset = box.globalToLocal(details.globalPosition);
    setState(() {
      posx = localOffset.dx;
      posy = localOffset.dy;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTapDown: (TapDownDetails details) => onTapDown(context, details),
      child: new Stack(fit: StackFit.expand, children: <Widget>[
        // Hack to expand stack to fill all the space. There must be a better
        // way to do it.
        new Container(color: Colors.white),
        new Positioned(
          child: new Text('hello'),
          left: posx,
          top: posy,
        )
      ]),
    );
  }
}

Answer 2

您可以使用 GestureDetector 获取触摸位置，然后使用 image_pixels 包中的 ImagePixels 小部件获取像素颜色：

ImagePixels(
   imageProvider: ...,
   builder: (BuildContext context, ImgDetails img) {
      var color = img.pixelColorAt(x, y);

这是一个工作示例：

import 'package:image_pixels/image_pixels.dart';
...

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, this.title}) : super(key: key);
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final AssetImage flutter = const AssetImage("lib/images/FlutterLogo.jpg");

  Offset localPosition = const Offset(-1, -1);
  Color color = const Color(0x00000000);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox.expand(
        child: Column(
          children: [
            const Expanded(
              flex: 1,
              child: Center(
                child: Text('Tap the image to see the pixel color:'),
              ),
            ),
            Expanded(
                flex: 4,
                child: Padding(
                    padding: const EdgeInsets.all(40.0),
                    child: Center(
                        child: Container(
                            color: Colors.grey,
                            child: Listener(
                                onPointerMove: (PointerMoveEvent details) {
                                  setState(() {
                                    localPosition = details.localPosition;
                                  });
                                },
                                onPointerDown: (PointerDownEvent details) {
                                  setState(() {
                                    localPosition = details.localPosition;
                                  });
                                },
                                child: ImagePixels(
                                    imageProvider: flutter,
                                    builder: (BuildContext context, ImgDetails img) {
                                      var color = img.pixelColorAt!(
                                        localPosition.dx.toInt(),
                                        localPosition.dy.toInt(),
                                      );

                                      WidgetsBinding.instance!.addPostFrameCallback((_) {
                                        if (mounted)
                                          setState(() {
                                            if (color != this.color) this.color = color;
                                          });
                                      });

                                      return SizedBox(
                                        width: 150,
                                        height: 213,
                                        child: Image(image: flutter),
                                      );
                                    })))))),
            
            Expanded(
              flex: 2,
              child: Column(
                children: [
                  Container(width: 75, height: 55, color: color),
                  Container(height: 20),
                  Text(localPosition.toString()),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

从 GitHub 中获取 code。

注：我是包的作者

Flutter：点击图像某处时如何获取像素颜色？

Flutter: How to get the pixel color when tapping somewhere on an image?

flutter

flutter-web