自定义 Clipper Bezier 曲线 Flutter [英] Custom Clipper Bezier curve Flutter

问题描述

我目前无法绘制贝塞尔曲线.

I am currently unable to draw a bezier curve.

我现在的输出是:

我需要的输出是:

我应该在此处添加什么作为贝塞尔值来获得曲线?自定义裁剪器的代码片段为:

What should I add here as bezier values to get the curve? The code snippet of the custom clipper is:

    class OnBoardingClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.moveTo(0.0, size.height * 0.18);
    path.lineTo(0.0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0.0);
    return path;
  }

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

附:感谢您阅读并在格式错误的情况下道歉.:-)

P.S. Thanks for reading and apologies in case of bad formatting. :-)

推荐答案

您可以添加一个 quadraticBezier，其值为例如 (3/4 * size.width, size.height *0.18) , (size.width, size.height * 0.05).

You can add a quadraticBezier with values of e.g., (3 / 4 * size.width, size.height * 0.18) , (size.width, size.height * 0.05).

代码:

@override
  Path getClip(Size size) {
    var path = Path();
    path.moveTo(0.0, size.height * 0.18);
    path.quadraticBezierTo(
        3 / 4 * size.width, size.height * 0.18, size.width, size.height * 0.05);
    path.lineTo(size.width, size.height);
    path.lineTo(0.0, size.height);
    return path;
  }

结果:

这篇关于自定义 Clipper Bezier 曲线 Flutter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！