Flutter设计wave quadraticBezierTo

Question

在此link我们已经解决了设计 wave quadraticBezierTo，但那是 wave quadraticBezierTo 的一半，我想要像这个屏幕截图一样的完整设计:

现在我的问题是我们如何更改下面的代码以在其右侧有另一半设计

下面这个类做这个

class WaveClipperTwo extends CustomClipper<Path> {
  bool reverse;

  WaveClipperTwo({this.reverse = false});

  final int _coefficient = 16;
  double get _minStep => 1 / _coefficient;
  double get _preCenter => _minStep * (_coefficient / 2 - 1);
  double get _postCenter => _minStep * (_coefficient / 2 + 1);
  double get _preEnd => _minStep * (_coefficient - 2);

  @override
  Path getClip(Size size) {
    var path = Path();
    path.moveTo(0.0, 0.0);
    if(!reverse) {
      path.lineTo(0.0, size.height - 20.0);
      path.lineTo(size.width * _preCenter, size.height - 20.0);
      path.cubicTo(size.width/2, size.height - 20.0, size.width/2, size.height - 40.0, size.width * _postCenter, size.height - 40.0);
      path.lineTo(size.width * _preEnd, size.height - 40.0);
      path.quadraticBezierTo(size.width, size.height - 40.0, size.width, size.height - 20.0);
      path.lineTo(size.width, 0.0);
      path.close();
    }else{
      path.lineTo(0.0, 20);
      path.lineTo(size.width * _preCenter, 20.0);
      path.cubicTo(size.width/2, 20.0, size.width/2, 40.0, size.width * _postCenter, 40.0);
      path.lineTo(size.width * _preEnd, 40.0);
      path.quadraticBezierTo(size.width, 40, size.width, 20.0);
      path.lineTo(size.width, 0.0);
      path.close();
    }

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Answer 1

给你:

当你想让中间部分变宽或变窄时，改变 innerWidth 常量。

class TopFeedsWaveCurve extends CustomClipper<Path> {
  final double innerWidth = 100;
  final double innerHeight = 20; 
  final double topOffcet = 60;

  @override
  Path getClip(Size size) {
    var halfW = innerWidth / 2;
    var height = innerHeight + topOffcet;
    var path = Path()
      ..moveTo(0.0, 0.0)
      ..lineTo(0.0, topOffcet)
      ..lineTo(size.width / 2 - halfW - innerHeight, topOffcet)
      ..cubicTo(
        size.width / 2 - halfW,
        topOffcet,
        size.width / 2 - halfW,
        height,
        size.width / 2 - halfW + innerHeight,
        height,
      )
      ..lineTo(size.width / 2 + halfW - innerHeight, height)
      ..cubicTo(
        size.width / 2 + halfW,
        height,
        size.width / 2 + halfW,
        topOffcet,
        size.width / 2 + halfW + innerHeight,
        topOffcet,
      )
      ..lineTo(size.width, topOffcet)
      ..lineTo(size.width, 0);

    return path;
  }

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