如何在Flutter中用Custom Painter实现自定义形状图片裁剪

要实现自定义形状的图片裁剪效果，你需要在CustomPainter中结合裁剪路径（Path）和遮罩层来实现，而非单纯绘制线条。以下是具体修改方案：

核心思路 #

• 用Path构建目标自定义裁剪形状（替代原有单独画线逻辑）
• 通过画布路径运算生成遮罩，实现裁剪区域外的图片遮挡效果
• 保留裁剪区域内的原图显示，同时绘制清晰的裁剪边框

修改后的代码实现 #

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class MyPainter extends CustomPainter {
  final ui.Image image;
  final List<Offset> cropPoints; // 存储裁剪形状的顶点坐标

  MyPainter({
    required this.image,
    required this.cropPoints,
  });

  @override
  void paint(Canvas canvas, Size size) {
    // 1. 绘制原始图片
    final imagePaint = Paint();
    canvas.drawImage(image, Offset(20, size.height / 6), imagePaint);

    // 2. 构建自定义裁剪路径
    final Path cropPath = Path();
    if (cropPoints.isNotEmpty) {
      cropPath.moveTo(cropPoints[0].dx, cropPoints[0].dy);
      for (int i = 1; i < cropPoints.length; i++) {
        cropPath.lineTo(cropPoints[i].dx, cropPoints[i].dy);
      }
      cropPath.close(); // 闭合路径形成完整形状
    }

    // 3. 绘制裁剪区域外的半透明遮罩
    final maskPaint = Paint()
      ..color = Colors.black.withOpacity(0.7)
      ..blendMode = BlendMode.srcOver;

    // 计算全屏路径与裁剪路径的差集，得到遮罩区域
    final fullScreenPath = Path()..addRect(Rect.fromLTWH(0, 0, size.width, size.height));
    final maskPath = Path.combine(PathOperation.difference, fullScreenPath, cropPath);
    canvas.drawPath(maskPath, maskPaint);

    // 4. 绘制裁剪区域的边框
    final borderPaint = Paint()
      ..color = Colors.white
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke;
    canvas.drawPath(cropPath, borderPaint);
  }

  @override
  bool shouldRepaint(covariant MyPainter oldDelegate) {
    // 图片或裁剪顶点变化时触发重绘
    return oldDelegate.image != image || oldDelegate.cropPoints != cropPoints;
  }
}

关键细节说明 #

• 自定义形状适配：如果目标是圆形、圆角矩形等特殊形状，可直接使用Path的addOval、addRRect等方法替代多边形顶点连接
• 遮罩透明度：可通过调整Colors.black.withOpacity()的参数，修改遮罩的深浅程度
• 边框样式：可根据需求修改borderPaint的颜色、粗细等属性，优化裁剪框的视觉效果

内容的提问来源于stack exchange，提问作者Mehmet Efe Özcan