圆上的绘制三角形上的GestureDetector

如何解决圆上的绘制三角形上的GestureDetector

我正在尝试使用CustomPaint小部件处理三个绘制的“四分之一”的水龙头。我尝试在QuarterCirclePainter类周围添加GestureDetectors。甚至尝试将GestureRecognizer用于TextSpan也没有成功。试图将其包装在用gestureDetectors包装的容器中。看过有关在CustomPaint周围添加GestureDetectors的类似帖子，但在这种情况下它们似乎都不起作用。 如何实现？

class CategoryCircle extends StatelessWidget {
  final Color color;
  final double startAngle;
  final String category;
  final Offset textOffset;
  CategoryCircle({this.color,this.startAngle,this.category,this.textOffset});

  Widget build(BuildContext context) {
    FocusScope.of(context).nextFocus();
    return FractionallySizedBox(
      widthFactor: 1,heightFactor: 1,child: Center(
        child: CustomPaint(
            painter: QuarterCirclePainter(
                context: context,color: color,startAngle: startAngle,sweepAngle: math.pi * 2 / 3,text: category,textOffset: textOffset)),),);
  }
}

class QuarterCirclePainter extends CustomPainter {
  final BuildContext context;
  final Color color;
  final double startAngle;
  final double sweepAngle;
  final String text;
  final Offset textOffset;

  const QuarterCirclePainter(
      {this.context,this.color,this.sweepAngle,this.text,this.textOffset});

  @override
  void paint(Canvas canvas,Size size) {
    Offset center = Offset(size.width / 2,size.height / 2);
    Rect rect = Rect.fromCircle(center: center,radius: 130);
    Path path = Path()
      // set the "current point"
      ..moveTo(center.dx,center.dy)
      ..arcTo(rect,startAngle,(math.pi * 2) / 3,false);
    canvas.drawPath(path,Paint()..color = color);
    TextSpan span = new TextSpan(
        style: GoogleFonts.overpass(
            textStyle: TextStyle(fontSize: 22,fontWeight: FontWeight.bold)),text: text);
    TextPainter tp = new TextPainter(
        text: span,textAlign: TextAlign.center,textDirection: TextDirection.ltr);
    tp.layout();
    tp.paint(canvas,textOffset);
  }

  @override
  bool shouldRepaint(QuarterCirclePainter oldDelegate) {
    return false;
  }
}

解决方法

我用您在CustomClipper中所做的事制作了一个QuarterCirclePainter，看起来像这样：

class QuaterCircleClipper extends CustomClipper<Path>{
  double startAngle,sweepAngle;

  QuaterCircleClipper({@required this.startAngle,@required this.sweepAngle});


  @override
  Path getClip(Size size){
    Offset center = Offset(size.width / 2,size.height / 2);
    Rect rect = Rect.fromCircle(center: center,radius: 130);
    Path path = Path()
      // set the "current point"
      ..moveTo(center.dx,center.dy)
      ..arcTo(rect,startAngle,(math.pi * 2) / 3,false);
      return path;
  }

  @override
  bool shouldReclip(oldCliper) => false;
}

并使用ClipPath和上面的CustomClipper作为clipper来包裹一个GestureDetector，其蓝色Container作为其child / p>

Container(
  width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height,child: AspectRatio(
    aspectRatio: 1,child: ClipPath(
      clipper: QuaterCircleClipper(startAngle: 0,sweepAngle: 120),child: GestureDetector(
        onTap: (){showDialog(context: context,builder: (_) => AlertDialog(content: Text("Tap Detected"),));},child: Container(
          color: Colors.blueAccent,)
      ),),)
),