如何在 flutter 中反转带有圆形边缘的弯曲半圆

问题描述 投票:0回答:0

我想用 CustomPainter 和 Flutter 制作这些弯曲的圆圈,请指导我如何做,谢谢

class ShapBounds extends CustomPainter {
  final Color color;
  final double avatarRadius;
  ShapBounds( {required this.color,required this.avatarRadius,});

  @override
  void paint(Canvas canvas, Size size) {

    final shapeBounds = Rect.fromLTWH(0, 0, size.width, size.height - avatarRadius);//2
//3
    //canvas.drawRect(shapeBounds, paint);
    final paint = Paint()..color = color;
    final centerAvatar = Offset(shapeBounds.center.dx , shapeBounds.bottom);
//2
    final avatarBounds = Rect.fromCircle(center: centerAvatar, radius: avatarRadius);
    //2
    final backgroundPath = Path()
      ..moveTo(shapeBounds.left , shapeBounds.top)
      ..lineTo(shapeBounds.bottomLeft.dx, shapeBounds.bottomLeft.dy) //4
      ..arcTo(avatarBounds, -pi, pi, false) //5
      ..lineTo(shapeBounds.bottomRight.dx, shapeBounds.bottomRight.dy) //6
      ..lineTo(shapeBounds.topRight.dx, shapeBounds.topRight.dy) //7
      ..close(); //8

    //9
    canvas.drawPath(backgroundPath, paint);
  }

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

我试过这个方法,但是圆角没有弧度

flutter flutter-animation flutter-custompainter flutter-clippath
© www.soinside.com 2019 - 2024. All rights reserved.