在剪刀颤动中塑造图像

Question

我正在变成这样

我的代码：

@override
  Path getClip(Size size) {
    var path = new Path();
    path.lineTo(0.0, size.height);
      var firstControlPoint = Offset(0, size.height -80);
    var firstEndPoint = Offset(size.width/2, size.height -60);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstEndPoint.dx, firstEndPoint.dy);
    var secondControlPoint = Offset(size.width  , size.height - 95);
    var secondEndPoint = Offset(size.width, size.height / 1.8);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondEndPoint.dx, secondEndPoint.dy);
    path.lineTo(size.width, size.height - 30);
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

我想这样塑造形象

谁能帮我解决这个问题？

Answer 1

通过使用你的firstEndPoint.dy，曲线似乎更平滑了。这里的代码：

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0.0, size.height);
    final firstControlPoint = Offset(0, size.height - 80);
    final firstEndPoint = Offset(size.width / 2, size.height - 60);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstEndPoint.dx, firstEndPoint.dy);
    
    // Make your secondControlPoint start with firstEndPoint.dy
    final secondControlPoint = Offset(size.width, firstEndPoint.dy);
    final secondEndPoint = Offset(size.width, size.height / 1.8);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondEndPoint.dx, secondEndPoint.dy);
    path.lineTo(size.width, size.height - 30);
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

  // ...
}

Try code on DartPad

在剪刀颤动中塑造图像

shape to image in clipper flutter

flutter

flutter-layout

clip-path