GestureDetector 绘制圆形三角形

Question

我正在尝试使用 CustomPaint 小部件处理三个绘制的“quartercirlces”的点击。我尝试在 QuarterCirclePainter class 周围添加 GestureDetectors。甚至尝试对 TextSpan 使用 GestureRecognizer 但没有成功。尝试将其包装在用 gestureDetectors 包装的容器中。查看了关于在 CustomPaint 周围添加 GestureDetectors 的类似帖子，但其中 none 似乎适用于这种情况。如何实现？

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.startAngle,
      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;
  }
}

Answer 1

我用你在 QuarterCirclePainter 中所做的做了一个 CustomClipper，它看起来像这样：

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

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,
        )
      ),
    ),
  )
),

GestureDetector 绘制圆形三角形

GestureDetector on painted triangles in circle

flutter

paint

custom-painting