Flutter Clipper 半径

问题描述

我有一个自定义剪刀（五角形），但我需要把所有的角都弄圆一点。

这是我的 Clipper 代码：

class Pentagon extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineto(size.width * 0.5,0);
    path.lineto(size.width,size.height * 0.38);  
    path.lineto(size.width * 0.82,size.height);
    path.lineto(size.width * 0.18,size.height);
    path.lineto(0,size.height * 0.38);
    path.lineto(size.width * 0.5,0);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

解决方法

尝试使用此工具绘制自定义形状，fluttershapemaker

,

使用StrokeCap.round来圆角，演示示例：

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

  Paint paint_0 = new Paint()
      ..color = Color.fromARGB(255,33,150,243)
      ..style = PaintingStyle.fill
      ..strokeWidth = 8.34;
      ..strokeCap = StrokeCap.round;

         
    Path path_0 = Path();
    path_0.moveTo(size.width*0.25,size.height*0.50);
    path_0.lineTo(size.width*0.31,size.height*0.40);
    path_0.lineTo(size.width*0.38,size.height*0.40);
    path_0.lineTo(size.width*0.44,size.height*0.50);
    path_0.lineTo(size.width*0.34,size.height*0.60);
    path_0.lineTo(size.width*0.25,size.height*0.50);
    path_0.close();

    canvas.drawPath(path_0,paint_0);
  
    
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
  
}

并称之为：

child: CustomPaint(
  size: Size(800,500),//You can Replace this with your desired WIDTH and HEIGHT
  painter: CustomPainterPentagon(),),