如何在 Flutter CustomPainter 中使用贝塞尔曲线绘制自定义形状？

Question

我正在尝试使用带有二次贝塞尔曲线的 flutter customPainter 库绘制下面的图片。我怎样才能画出这个形状？

我的代码：

  @override
  void paint(Canvas canvas, Size size) {
  
    var paint = Paint();
    paint.color = Colors.white;
    paint.style = PaintingStyle.fill; // Change this to fill

    final path = Path();

    path.moveTo(-5, size.height / 2);
    path.quadraticBezierTo(
      size.width / 2,
      -50,
      size.width + 5,
      size.height / 2,
    );
    path.close();

    canvas.drawPath(path, paint);

  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Answer 1

我有点晚了，但这可能对将来的某人有利。 你想要做的是创建3条曲线_两条曲线是凹的，中间一条是凸的。但在你的代码中你只有一条曲线，为了解决这个问题，添加两个二次贝塞尔曲线我使用Kotlin，每个数字后面的“f”代表浮点值我不知道它在dart中是否相同，但你可以弄清楚：

    final path = Path();

    path.moveTo(0f,0f);
    path.lineTo(0f,size.height);


    path.quadraticBezierTo(0f,4f/5f*size.height,size.width/4f,3f/5f*size.height)
    path.quadraticBezierTo(0.3f * size.width,0.5f * size.height,size.width/4f,2f/5f*size.height)
    path.quadraticBezierTo(0f ,1f/5f*size.height,0f,0f)
    path.close();

    canvas.drawPath(path, paint);

 

Answer 2

我首先使用自定义绘画，但我对 (x1, y1, x2,y2) 感到困惑。有什么建议吗？