颤振-朝着弧线绘制

Question

我需要画这样的东西：

我尝试通过创建CustomClipper<Path>并将其用于ClipPath()

来完成此操作

这是我的代码：

class ArcBackground extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      child: Container(
        width: double.infinity,
        height: 400.0,
        color: Colors.orange,
      ),
      clipper: RoundedClipper(),
    );
  }
}

class RoundedClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height);
    path.quadraticBezierTo(
      size.width / 2, 
      size.height - 100, 
      size.width, 
      size.height
    );
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

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

这段代码为我提供了以下输出：

正如您看到的那样，由于将quadraticaBezierTo() y1属性设置为size.height - 100，所以圆弧指向上，我期待通过使{{1} }属性设置为y1，但无效。

如何获得指向下方的弧？

Answer 1

这对您有用吗？

@override
Path getClip(Size size) {
  var path = Path();
  path.lineTo(0.0, size.height-100);
  path.quadraticBezierTo(
    size.width / 2, 
    size.height,
    size.width,
    size.height - 100
  );
  path.lineTo(size.width, 0.0);
  path.close();
  return path;
}