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

时间:2020-04-19 05:30:38

标签: flutter flutter-layout

因此,我使用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更改为fill时,我得到

PaintingStyle: fill

0 个答案:

没有答案