CustomClipper & CustomPainter

[popeyelau]

参考资料

• Path 与 CustomPainter
• flutter_custom_clippers
• Flutter Shape Maker
• SVG to Flutter Path

[popeyelau]

class TagPainter extends CustomPainter {
  final Color color;
  final String tag;

  TagPainter({this.tag = "", this.color = Colors.red});

  @override
  void paint(Canvas canvas, Size size) {
    final double width = size.width;
    final double height = size.height;
    final double triangleWidth = height / 2;

    Paint paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;

    Path path = Path()
      ..lineTo(width - triangleWidth, 0.0)
      ..lineTo(width, height / 2)
      ..lineTo(width - triangleWidth, height)
      ..lineTo(0.0, height)
      ..close();

    canvas.drawPath(path, paint);

    TextPainter textPaint = TextPainter(
      ellipsis: "...",
      textAlign: TextAlign.center,
      maxLines: 1,
      text: TextSpan(
        text: tag,
        style: TextStyle(
            fontSize: 14, color: Colors.white, fontWeight: FontWeight.w500),
      ),
      textDirection: TextDirection.ltr,
    );

    textPaint
      ..layout(
        maxWidth: width - triangleWidth,
        minWidth: width - triangleWidth,
      )
      ..paint(
          canvas, Offset(0, (height - textPaint.preferredLineHeight) * 0.5));
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return oldDelegate != this;
  }
}

[popeyelau]

class BottomWaveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0.0, size.height - 20);

    final controlPoint1 = Offset(size.width / 4, size.height);
    final endPoint1 = Offset(size.width / 2, size.height - 30.0);
    path.quadraticBezierTo(
        controlPoint1.dx, controlPoint1.dy, endPoint1.dx, endPoint1.dy);

    final controlPoint2 = Offset(size.width - size.width / 4, size.height - 60);
    final endPoint2 = Offset(size.width, size.height - 30);
    path.quadraticBezierTo(
        controlPoint2.dx, controlPoint2.dy, endPoint2.dx, endPoint2.dy);
    path.lineTo(size.width, 0.0);
    path.close();

    return path;
  }

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

[popeyelau]

class ClippingClass extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0.0, size.height - 40);
    path.quadraticBezierTo(
        size.width / 4, size.height, size.width / 2, size.height);
    path.quadraticBezierTo(size.width - (size.width / 4), size.height,
        size.width, size.height - 40);
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

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

[popeyelau]

class CouponAmountClipper extends CustomClipper<Path> {
  final double deep;
  final double borderRadius;

  CouponAmountClipper({this.deep = 30.0, this.borderRadius = 10.0});

  @override
  Path getClip(Size size) {
    final double width = size.width;
    final double height = size.height;
    Path path = Path()
      ..addRRect(RRect.fromRectAndCorners(
          Rect.fromLTWH(0, 0, width - deep, height),
          topLeft: Radius.circular(borderRadius),
          bottomLeft: Radius.circular(borderRadius)))
      ..lineTo(size.width - deep, 0)
      ..quadraticBezierTo(
          size.width, size.height / 2, size.width - deep, size.height)
      ..close();
    return path;
  }

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