如何在使用CustomPainter drawPath创建的形状内填充颜色?

问题描述 投票:1回答:1

因此,我使用CustomPainter中的drawPath和drawArc创建了一个形状,PaintingStyle是笔触,但是当我将其更改为填充时,它仅填充弧而不是整个形状。我想用颜色填充创建的形状,那么如何用特定颜色填充形状?


class CustomShapeCard extends CustomPainter {
  CustomShapeCard({@required this.strokeWidth, @required this.color});

  final double strokeWidth;
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth
      ..color = color;

    var path = Path();

    path.moveTo(size.width * 0.1, size.height * 0.2);
    path.lineTo(size.width * 0.1, size.height * 0.9);
    canvas.drawPath(path, paint);

    canvas.drawArc(
      Rect.fromCenter(
        center: Offset((size.width * 0.2) - 14, size.height * 0.9),
        height: 50,
        width: 50,
      ),
      math.pi / 2,
      math.pi / 2,
      false,
      paint,
    );

    path.moveTo((size.width * 0.2) - 14, (size.height * 0.9) + 25);
    path.lineTo((size.width * 0.9) - 25, size.height * 0.9 + 25);
    canvas.drawPath(path, paint);

    canvas.drawArc(
      Rect.fromCenter(
        center: Offset((size.width * 0.9) - 25, size.height * 0.9),
        height: 50,
        width: 50,
      ),
      math.pi / 2,
      -math.pi / 2,
      false,
      paint,
    );

    path.moveTo((size.width * 0.9), (size.height * 0.9));
    path.lineTo(size.width * 0.9, size.height * 0.35);
    canvas.drawPath(path, paint);

    canvas.drawArc(
      Rect.fromCenter(
        center: Offset((size.width * 0.9) - 25, size.height * 0.35),
        height: 50,
        width: 50,
      ),
      -math.pi / 2,
      math.pi / 2,
      false,
      paint,
    );

    path.moveTo((size.width * 0.9) - 25, (size.height * 0.35) - 25);
    path.lineTo(size.width * 0.25, (size.height * 0.35) - 25);
    canvas.drawPath(path, paint);

    canvas.drawArc(
      Rect.fromCenter(
        center: Offset((size.width * 0.25), (size.height * 0.35) - 50),
        height: 50,
        width: 50,
      ),
      math.pi / 2,
      math.pi / 3,
      false,
      paint,
    );

    path.moveTo((size.width * 0.25) - 20, (size.height * 0.35) - 35);
    path.lineTo(size.width * 0.1, size.height * 0.2);
    canvas.drawPath(path, paint);
  }

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

当PaintingStyle为笔触时,得到此,

PaintingStyle: Stroke

当我更改PaintingStyle以填充时,我得到,

PaintingStyle: fill

flutter flutter-layout
1个回答
0
投票

尝试致电

 path.close();

绘制路径的结尾

© www.soinside.com 2019 - 2024. All rights reserved.