Flutter ：在图像中单击的位置添加一个圆圈

Posted 2023-05-07

【中文标题】Flutter ：在图像中单击的位置添加一个圆圈

【英文标题】：Flutter : add a circle where you click in an image

【发布时间】：2022-01-07 04:28:19

【问题描述】：

（有关我开始使用颤振的信息）

当用户点击图片时，我尝试在他点击的确切位置在图片上添加一个圆圈

我设法在日志中显示我点击了图片，但点击后无法显示圆圈

下一步是检索我们点击的位置以在该位置显示圆圈

exemple with image

class _Cible extends State<Cible> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          centerTitle: true,
          title: Text('My APP'),
        ),
        body: Center(
          child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Circle when i clic somewhere'),
                GestureDetector(
                  
                  child: Image(
                      image: AssetImage("images/body.png"),
                      width: 280,
                      height: 450),
                
                onTap: () 
                    print("ok");
                    
                    CustomPaint(size: Size(5, 5) ,painter: CirclePainter());
                  ,),
                Container(
                  child : CustomPaint(size: Size(5, 5), painter: CirclePainter())
                ),etc..

class CirclePainter extends CustomPainter 
  @override
  void paint(Canvas canvas, Size size) 
    var paint = Paint()
      ..color = Colors.teal
      ..strokeWidth = 15;

    Offset center = Offset(size.width / 2, size.height / 2);

    canvas.drawCircle(center, 15, paint);
  

  @override
  bool shouldRepaint(CustomPainter oldDelegate) 
    return false;
  

【参考方案1】：

您应该在手势检测器中使用 onTapUp ：

onTapUp:(details) => position = details.globalposition , 
/* Same as onTap but with details parameters*/

【讨论】：

我写的是：onTapUp: (TapUpDetails details) => offset = details.localPosition，（我用一种方法打印它，这很好）但我仍然无法将变量偏移量传输到我的 circlePainter

【参考方案2】：

我认为您想要的是 Stack 而不是 Column。甚至还有一个关于 Widget of the Week 的简短视频教程：https://api.flutter.dev/flutter/widgets/Stack-class.html

您可能还需要考虑您的 Widget 树以及如何重建它。一种快速而简单的方法是使用 setState，将 position 从 null 更改为某个坐标。您需要根据位置向堆栈中添加一个小部件。