Flutter在CustomPainter的右上角和左上角添加了2条曲线

发布于10月01日

下面的代码可以创建一个客户path，它在topLeft和topRight上没有曲线，你能帮我怎么做吗？

我需要制作与此屏幕截图相同的内容:

original:

class CurvedPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = DV.$light
      ..style = PaintingStyle.fill;

    final path = Path()
      ..moveTo(0, size.height * 0.7)
      ..quadraticBezierTo(size.width * 0.25, size.height * 0.8, size.width * 0.4, size.height * 0.6)
      ..quadraticBezierTo(size.width * 0.65, size.height * 0.3, size.width, size.height * 0.6)
      ..lineTo(size.width, 0)
      ..lineTo(0, 0);

    canvas.drawPath(path, paint);
  }

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

推荐答案

要在右上角和左上角添加圆角，我建议您使用arcToPoint:

以下是你可以使用它的方法:

class CurvedPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = DV.$light
      ..style = PaintingStyle.fill;

    final path = Path()
      ..moveTo(40, 0)
      ..arcToPoint(
        const Offset(0, 40),
        radius: const Radius.circular(40),
        clockwise: false,
      )
      ..lineTo(0, size.height * 0.7)
      ..quadraticBezierTo(size.width * 0.25, size.height * 0.8, size.width * 0.4, size.height * 0.6)
      ..quadraticBezierTo(size.width * 0.65, size.height * 0.3, size.width, size.height * 0.6)
      ..lineTo(size.width, 40)
      ..arcToPoint(
        Offset(size.width - 40, 0),
        radius: const Radius.circular(40),
        clockwise: false,
      )
      ..lineTo(40, 0)
      ..close();

    canvas.drawPath(path, paint);
  }

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