Canvas

简单拆解下,App中经常看到的一种Tabbar是如何画的。

第一步，先给Tabbar加五个弧度(如图)

这一步实现的关键，就是在恰当的地方截取弧线，现在我们来看下，他的真身。

从圆中截取弧线的API可以使用这个，

简单介绍一下，这个api就是找一个矩形，然后从矩形的中心点做圆心画一个椭圆，然后根据后面的角度的参数，截一段弧！全部的代码如下:

 void paint(Canvas canvas,Size size) {
    
    size = Size(300,50);
    
    Paint paint = Paint()
      ..color = Colors.red;
    
    double radius = 38.0;
    
    final Path path = Path();

    final double v = radius * 2;
    path.lineTo(0, 0);
    //创建一个弧  degreeToRadians 度到一个弧度
    path.arcTo(Rect.fromLTWH(0, 0, radius, radius),
        degreeToRadians(180),
        degreeToRadians(90),
        false);
    path.arcTo(
        Rect.fromLTWH(
            ((size.width / 2) - v / 2) - radius + v * 0.04, 0, radius, radius),
        degreeToRadians(270),
        degreeToRadians(70),
        false);

    path.arcTo(Rect.fromLTWH((size.width / 2) - v / 2, -v / 2, v, v),
        degreeToRadians(160),
        degreeToRadians(-140),
        false);

    path.arcTo(
        Rect.fromLTWH((size.width - ((size.width / 2) - v / 2)) - v * 0.04, 0,
            radius, radius),
        degreeToRadians(200),
        degreeToRadians(70),
        false);

    path.arcTo(Rect.fromLTWH(size.width - radius, 0, radius, radius),
        degreeToRadians(270), degreeToRadians(90), false);


    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);

    path.close();
    canvas.drawPath(path,paint);
    
    
    ///第一个弧的白色圈
     Paint paint2 = Paint()
      ..color = Colors.white;
    canvas.drawCircle(Offset(19, 19), 19, paint2);
    
       ///第二个弧的蓝色圈
     Paint paint3 = Paint()
      ..color = Colors.blue;
    canvas.drawCircle(Offset(((size.width / 2) - v / 2) - radius + v * 0.04 + 19, 19), 19, paint3);
    
           ///第三个弧的粉色圈
     Paint paint4 = Paint()
      ..color = Colors.pink;
    canvas.drawCircle(Offset((size.width / 2) - v / 2 + 38,  -v / 2 + 38), 38, paint4);
    
               ///第四个弧的绿色圈
     Paint paint5 = Paint()
      ..color = Colors.green;
    canvas.drawCircle(Offset((size.width - ((size.width / 2) - v / 2)) - v * 0.04 + 19,  -v / 2 + 38 + 19), 19, paint5);
    
               ///第五个弧的橙色圈
     Paint paint6 = Paint()
      ..color = Colors.orange;
    canvas.drawCircle(Offset(size.width - radius + 19, 19), 19, paint6);

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

我把代码仍在DartPad上了，您可以直接看,直接编辑，有不懂的地方在评论区提问，大家一起讨论共同寻找答案咯! dartpad.cn/5ae5769f337…