如何绘制这样的自定义颤动边框?

2024-04-11

我想要有关如何实现自定义边框的想法,如下图所示。


我制造了一个CustomPainter绘制形状:

class MyPainter extends CustomPainter {
  Color color;
  MyPainter({@required this.color});
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..color = color
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    var path = Path();
    final double startPoint = size.width * 0.2;
    final double rheight = 30;
    path.moveTo(startPoint, rheight);
    path.lineTo(startPoint + 20, 0);
    path.lineTo(startPoint + 40, rheight);
    path.moveTo(0, rheight);
    path.lineTo(startPoint, rheight);
    path.moveTo(startPoint + 40, rheight);
    path.lineTo(size.width, rheight);
    path.lineTo(size.width, size.height);
    path.moveTo(0, rheight);
    path.lineTo(0, size.height);
    path.moveTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.close();
    canvas.drawPath(path, paint);
  }

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

Usage:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(30.0),
          child: CustomPaint(
            painter: MyPainter(color: Colors.black.withOpacity(0.2)),
            child: Container(
              height: 300,
            )
          ),
        ),
      ),
    );
  }

Result:

Update:这是弯曲边缘版本:

class MyPainter extends CustomPainter {
  Color color;
  MyPainter({@required this.color});
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..color = color
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    var path = Path();
    final double startPoint = size.width * 0.2;
    final double rheight = 30;
    path.moveTo(startPoint, rheight);
    path.lineTo(startPoint + 20, 5);
    path.cubicTo(startPoint + 23, 0, startPoint + 26, 0,
      startPoint + 29, 0);
    path.lineTo(startPoint + 50, rheight);
    path.moveTo(10, rheight);
    path.lineTo(startPoint, rheight);
    path.moveTo(startPoint + 50, rheight);
    path.lineTo(size.width - 10, rheight);
    path.cubicTo(size.width, rheight + 5, size.width, rheight + 10,
        size.width, rheight + 15);
    path.lineTo(size.width, size.height - 15);
    path.moveTo(10, rheight);
    path.cubicTo(0, rheight + 5, 0, rheight + 10,
        0, rheight + 15);
    path.lineTo(0, size.height - 10);
    path.cubicTo(5, size.height, 10, size.height,
        15, size.height);
    path.moveTo(15, size.height);
    path.lineTo(size.width - 10, size.height);
    path.cubicTo(size.width, size.height - 5, size.width, size.height - 10,
        size.width, size.height - 15);
    path.moveTo(size.width - 5, size.height);
    path.close();
    canvas.drawPath(path, paint);
  }

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

Result:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何绘制这样的自定义颤动边框? 的相关文章

随机推荐