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

时间:2019-09-30 03:56:44

标签: flutter flutter-layout curve

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

1 个答案:

答案 0 :(得分: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

}