颤振：如何翻转此路径剪辑贝塞尔

问题描述

我有这个形状 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,height - 16);
    path.quadraticBezierTo(0,height - 8,height);
    path.close();
    return path;
  }

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

这是github repository 我不在乎半圆。

解决方法

我认为应该是这样的：

     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,height / 2 + 20,height - 16width + 1);
        path.quadraticBezierTo(height,height - 8,0);
        path.close();
        return path;
      }

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