如何在Flutter中绘制自定义闭合曲线？

Question

我尝试在CustomPainter画布上使用cubicTo和conicTo等曲线，但生成的曲线不平滑，使其看起来像简单的闭合曲线。

Answer 1

您可以扩展CustomPainter类来制作形状，直线和曲线。

请注意，任何路径的起点都是x = 0，y = 0（左上角）。

当您要绘制闭合路径时，必须在使用path完成绘制后始终关闭路径。参见下面的示例，它将绘制平滑的波形。

您可以检查here用路径绘制什么以及如何绘制

class CustomWave extends CustomPainter{
  @override
  void paint(Canvas canvas, Size size) {

    var path = Path();
    var paint = Paint();

    path.moveTo(0,size.height*0.84);
    path.quadraticBezierTo(size.width*0.25, size.height*0.77, size.width*0.52, size.height*0.84);
    path.quadraticBezierTo(size.width*0.74, size.height*0.92, size.width, size.height*0.84);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();
    paint.color = AppColors.primaryColor.withOpacity(0.70);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate)=>true

}