flutter : 如何翻转这个路径剪辑 Bezier

Question

我有这个形状 enter image description here

我想把它翻转成这样

enter image description here

这是原始代码

class CustomMenuClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Paint paint = Paint();
    paint.color = Colors.white;

    final width = size.width;
    final height = size.height;

    Path path = Path();
    path.moveTo(0, 0);
    path.quadraticBezierTo(0, 8, 10, 16);
    path.quadraticBezierTo(width - 1, height / 2 - 20, width, height / 2);
    path.quadraticBezierTo(width + 1, height / 2 + 20, 10, height - 16);
    path.quadraticBezierTo(0, height - 8, 0, height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
} 

这是github repository 如果是半圆，我不介意。

Answer 1

我认为应该是这样的：

     Path getClip(Size size) {
        Paint paint = Paint();
        paint.color = Colors.white;
    
        final width = size.width;
        final height = size.height;
    
        Path path = Path();
        path.moveTo(width, 0);
        path.quadraticBezierTo(16, 10, 8, 0);
        path.quadraticBezierTo(height / 2,  width, height / 2 - 20 ,width - 1);
        path.quadraticBezierTo( height - 16, 10, height / 2 + 20, height - 16width + 1);
        path.quadraticBezierTo(height, 0, height - 8, 0);
        path.close();
        return path;
      }

我不建议这样做，因为不同的设备可能会重现不同的行为。也许使用size.width 和size.height 可能是更好的响应方式。