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

Question

因此，我使用 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 为 stroke 时，我明白了，

当我将 PaintingStyle 更改为 fill 时，我得到，

Answer 1

要用颜色填充这样的形状，应该使用 arcToPoint() 而不是 drawArc()。