Flutter Canvas绘制DVD自定义形状时背景图片溢出问题求助

你的问题出在绘制顺序和裁剪逻辑上：原代码先绘制了整张背景图，之后绘制的路径只是作为形状覆盖在图片上，并没有对图片进行裁剪，所以图片会超出路径范围显示。下面提供两种可行的解决方法：

方法一：使用画布裁剪（clipPath） #

先创建自定义路径，然后通过canvas.clipPath()将画布裁剪为该路径的形状，之后再绘制图片，这样图片只会在路径范围内显示。注意要使用canvas.save()和canvas.restore()来保存/恢复画布状态，避免影响后续绘制操作。

修正后的Painter类代码：

class Painter extends CustomPainter {
  final ui.Image sBackground; // 将图片作为参数传入，更符合封装性

  Painter(this.sBackground);

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..style = PaintingStyle.fill;
    
    // 1. 创建DVD形状路径
    Path path = Path()..moveTo(0, 0);
    path.quadraticBezierTo(0, 0, size.width * 0.5, 0);
    path.quadraticBezierTo(size.width, 0, size.width, size.height * 0.5);
    path.lineTo(size.width * 0.55, size.height * 0.5);
    path.quadraticBezierTo(size.width * 0.55, size.height * 0.45,
        size.width * 0.5, size.height * 0.45);
    path.quadraticBezierTo(size.width * 0.45, size.height * 0.45,
        size.width * 0.45, size.height * 0.5);
    path.quadraticBezierTo(size.width * 0.45, size.height * 0.55,
        size.width * 0.5, size.height * 0.55);
    path.quadraticBezierTo(size.width * 0.55, size.height * 0.55,
        size.width * 0.55, size.height * 0.5);
    path.lineTo(size.width, size.height * 0.5);
    path.quadraticBezierTo(
        size.width, size.height, size.width * 0.5, size.height);
    path.quadraticBezierTo(0, size.height, 0, size.height * 0.5);
    path.quadraticBezierTo(0, 0, size.width * 0.5, 0);
    path.close();

    // 2. 保存画布状态，裁剪为路径形状
    canvas.save();
    canvas.clipPath(path);
    // 3. 在裁剪后的画布内绘制图片
    canvas.drawImage(sBackground, Offset.zero, paint);
    // 4. 恢复画布状态
    canvas.restore();

    // 绘制阴影和路径边框（可选，根据需求调整）
    canvas.drawShadow(path, Colors.white30, 2.0, true);
    canvas.drawPath(path, paint..color = Colors.transparent); // 如果需要保留路径边框可以修改颜色
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return oldDelegate is Painter && oldDelegate.sBackground != sBackground;
  }
}

方法二：使用ImageShader填充路径（更高效） #

将图片转换为ImageShader，作为Paint的填充内容，直接通过drawPath()绘制带图片填充的路径，这种方式不需要裁剪画布，性能更优。

修正后的Painter类代码：

class Painter extends CustomPainter {
  final ui.Image sBackground;

  Painter(this.sBackground);

  @override
  void paint(Canvas canvas, Size size) {
    // 1. 创建ImageShader，将图片适配到路径尺寸
    final shader = ImageShader(
      sBackground,
      TileMode.clamp, // 超出部分的处理模式，可根据需求改为repeat/mirror
      TileMode.clamp,
      Matrix4.identity().storage,
    );

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

    // 2. 创建DVD形状路径
    Path path = Path()..moveTo(0, 0);
    path.quadraticBezierTo(0, 0, size.width * 0.5, 0);
    path.quadraticBezierTo(size.width, 0, size.width, size.height * 0.5);
    path.lineTo(size.width * 0.55, size.height * 0.5);
    path.quadraticBezierTo(size.width * 0.55, size.height * 0.45,
        size.width * 0.5, size.height * 0.45);
    path.quadraticBezierTo(size.width * 0.45, size.height * 0.45,
        size.width * 0.45, size.height * 0.5);
    path.quadraticBezierTo(size.width * 0.45, size.height * 0.55,
        size.width * 0.5, size.height * 0.55);
    path.quadraticBezierTo(size.width * 0.55, size.height * 0.55,
        size.width * 0.55, size.height * 0.5);
    path.lineTo(size.width, size.height * 0.5);
    path.quadraticBezierTo(
        size.width, size.height, size.width * 0.5, size.height);
    path.quadraticBezierTo(0, size.height, 0, size.height * 0.5);
    path.quadraticBezierTo(0, 0, size.width * 0.5, 0);
    path.close();

    // 3. 绘制带图片填充的路径和阴影
    canvas.drawShadow(path, Colors.white30, 2.0, true);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return oldDelegate is Painter && oldDelegate.sBackground != sBackground;
  }
}

关键说明 #

• 方法一的核心是通过clipPath限制画布的绘制区域，确保图片只在路径内显示；
• 方法二直接将图片作为路径的填充内容，更适合这种自定义形状填充图片的场景，避免了裁剪带来的性能开销；
• 两种方法都需要将图片作为参数传入Painter类，确保封装性和状态管理的正确性；
• 如果需要让图片完全适配路径尺寸，可以调整ImageShader的矩阵参数，比如添加缩放变换。

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