使用ClipPath波形曲线不平滑

问题描述

我必须创建一条如下所示的曲线：

这是我的代码试图绘制曲线。但这是一条直线。

ClipPath(
  clipper: ArrowClipper(),child: Container(
    width: 35,height: 110,color: Color(0xFF3F3C5F),child: isOpenedAsync.data
           ? Icon(Icons.chevron_right)
           : Icon(Icons.chevron_left),),

快船课

class ArrowClipper extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    Paint paint = Paint();
    paint.color = Variables.backgroundColor;
    Path path = Path();
    final w = size.width; // 35
    final h = size.height; // 110

    path.moveto(w,0);
    path.quadraticBezierTo(w,2,w - 2,2);
    path.quadraticBezierTo(1,(h/2) - 2,h/2);
    path.quadraticBezierTo(0,h,(h/2) + 2);
    path.quadraticBezierTo(w-2,h - 2,w,h);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return true;
  }
}

以上代码的输出如下：

解决方法

感谢@Andreas。我需要使用path.quadraticBezierTo()来代替path.cubicTo()。

    path.moveTo(w,0);
    path.cubicTo(
        w,h * 0.35,w * 0.025,h * 0.4,h * 0.5);
    path.cubicTo(
        w * 0.025,h * 0.7,w,h * 0.6,h);
    path.close();