使用 Flutter 创建曲线：贝塞尔曲线

Question

我在 flutter 中创建了一个自定义的 clipper Bezier 曲线，但是我创建的曲线不平滑（没有曲线）。

我现在有的就是这个

代码

  class MyClipper extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    var path = new Path();

    path.lineTo(0, size.height) ;
    var firstEndPoint = new Offset(0,size.height);
    var firstControlPoint = new Offset(35,size.height* 7/10);
    path.quadraticBezierTo(firstEndPoint.dx, firstEndPoint.dy, firstControlPoint.dx, firstControlPoint.dy);
    
    path.lineTo(size.width, size.height* 7/10);
    path.lineTo(size.width, 0);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    // TODO: implement shouldReclip
    return true;
  }
  
}

我希望那个角是一条平滑的曲线，我尝试更改值但没有成功。

需要在代码中更改哪些内容才能获得正确的结果？

Answer 1

你可能想要这个吗？如果没有，请在问题中附上你想要实现的图片。

此外，我稍微整理了一下您的编码风格，使其更像 dart：

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final firstEndPoint = Offset(10, size.height * 0.7);
    final firstControlPoint = Offset(35, size.height * 0.7);

    return Path()
      ..lineTo(0, size.height)
      ..quadraticBezierTo(firstEndPoint.dx, firstEndPoint.dy,
          firstControlPoint.dx, firstControlPoint.dy)
      ..lineTo(size.width, size.height * 0.7)
      ..lineTo(size.width, 0)
      ..close();
  }

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

使用 Flutter 创建曲线：贝塞尔曲线

Create a curve using Flutter: Bezier Curve

bezier

dart

flutter

flutter-layout