Flutter实现带波浪边框的圆形图片容器方法求助

问题描述 #

想要制作一个带波浪边框的圆形容器展示图片，修改了flutter_custom_clippers 2.0.0包中的StarClipper后无法达到预期效果：

当前效果 #

预期效果 #

问题分析 #

现有代码的核心问题：

• counter变量的交替逻辑导致路径绘制混乱，不符合波浪圆形的规律
• 二次贝塞尔曲线的控制点与终点设置错误，无法形成连续平滑的波浪
• 初始moveTo位置设置不合理，导致路径起点偏移

解决方案 #

方案一：修改CustomClipper实现波浪圆形裁剪 #

以下是修正后的WaveCircleClipper，可生成符合预期的波浪圆形容器：

import 'dart:math' as math;
import 'package:flutter/widgets.dart';

class WaveCircleClipper extends CustomClipper<Path> {
  WaveCircleClipper(this.waveCount, this.waveDepth);

  // 波浪的数量
  final int waveCount;
  // 波浪向内凹陷的深度
  final double waveDepth;

  @override
  Path getClip(Size size) {
    final path = Path();
    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.width / 2;
    // 每个波浪对应的角度步长
    final angleStep = 2 * math.pi / waveCount;
    final halfAngleStep = angleStep / 2;

    // 从顶部第一个波浪凹点开始
    final startAngle = -math.pi / 2;
    var currentAngle = startAngle;

    path.moveTo(
      center.dx + (radius - waveDepth) * math.cos(currentAngle),
      center.dy + (radius - waveDepth) * math.sin(currentAngle),
    );

    for (int i = 0; i < waveCount; i++) {
      // 波浪的外凸点（原圆形位置）
      final convexAngle = currentAngle + halfAngleStep;
      final convexPoint = Offset(
        center.dx + radius * math.cos(convexAngle),
        center.dy + radius * math.sin(convexAngle),
      );

      // 下一个波浪的内凹点
      currentAngle += angleStep;
      final concavePoint = Offset(
        center.dx + (radius - waveDepth) * math.cos(currentAngle),
        center.dy + (radius - waveDepth) * math.sin(currentAngle),
      );

      // 用二次贝塞尔曲线连接凹点→凸点→下一个凹点
      path.quadraticBezierTo(
        convexPoint.dx,
        convexPoint.dy,
        concavePoint.dx,
        concavePoint.dy,
      );
    }

    path.close();
    return path;
  }

  @override
  bool shouldReclip(WaveCircleClipper oldClipper) {
    return waveCount != oldClipper.waveCount || waveDepth != oldClipper.waveDepth;
  }
}

使用示例：

ClipPath(
  clipper: WaveCircleClipper(12, 8), // 12个波浪，深度8
  child: Container(
    width: 200,
    height: 200,
    child: Image.network(
      '你的图片URL',
      fit: BoxFit.cover,
    ),
  ),
)

方案二：使用CustomPaint绘制波浪边框（无需裁剪图片） #

如果仅需要给圆形图片添加波浪边框，无需裁剪图片本身，可直接用CustomPaint绘制：

import 'dart:math' as math;
import 'package:flutter/widgets.dart';

class WaveBorderPainter extends CustomPainter {
  WaveBorderPainter(this.waveCount, this.waveDepth, this.borderWidth);

  final int waveCount;
  final double waveDepth;
  final double borderWidth;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue // 边框颜色
      ..style = PaintingStyle.stroke
      ..strokeWidth = borderWidth;

    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.width / 2 - borderWidth / 2;
    final angleStep = 2 * math.pi / waveCount;
    final halfAngleStep = angleStep / 2;

    final path = Path();
    final startAngle = -math.pi / 2;
    var currentAngle = startAngle;

    path.moveTo(
      center.dx + (radius - waveDepth) * math.cos(currentAngle),
      center.dy + (radius - waveDepth) * math.sin(currentAngle),
    );

    for (int i = 0; i < waveCount; i++) {
      final convexAngle = currentAngle + halfAngleStep;
      final convexPoint = Offset(
        center.dx + radius * math.cos(convexAngle),
        center.dy + radius * math.sin(convexAngle),
      );

      currentAngle += angleStep;
      final concavePoint = Offset(
        center.dx + (radius - waveDepth) * math.cos(currentAngle),
        center.dy + (radius - waveDepth) * math.sin(currentAngle),
      );

      path.quadraticBezierTo(
        convexPoint.dx,
        convexPoint.dy,
        concavePoint.dx,
        concavePoint.dy,
      );
    }

    path.close();
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(WaveBorderPainter oldDelegate) {
    return waveCount != oldDelegate.waveCount ||
        waveDepth != oldDelegate.waveDepth ||
        borderWidth != oldDelegate.borderWidth;
  }
}

使用示例：

Container(
  width: 200,
  height: 200,
  child: Stack(
    alignment: Alignment.center,
    children: [
      ClipOval(
        child: Image.network(
          '你的图片URL',
          width: 200,
          height: 200,
          fit: BoxFit.cover,
        ),
      ),
      CustomPaint(
        size: Size(200, 200),
        painter: WaveBorderPainter(12, 8, 3), // 12个波浪，深度8，边框宽度3
      ),
    ],
  ),
)

说明 #

• 方案一通过裁剪实现带波浪边缘的图片容器，图片会随波浪形状被裁剪
• 方案二通过叠加绘制波浪边框，图片保持圆形，仅添加边框效果
• 可通过调整waveCount（波浪数量）和waveDepth（波浪深度）参数，匹配预期效果

内容的提问来源于stack exchange，提问作者Shweta