如何在UIImageView关联CALayer上叠加多个CIFilter实现照片局部修图？

你当前方案的核心缺陷是：多层叠加时是单滤镜全图结果的像素混合，而非滤镜效果按区域累加，且未被蒙版裁剪的区域会直接遮挡下层效果，最终呈现自然不符合预期。以下是两种可落地的优化方案：

方案1：单渲染管线+蒙版缓存方案（推荐） #

完全规避多CALayer叠加的限制，渲染效率、效果精度都更高：

• 底层仅保留1个展示原图的UIImageView，不需要为每个滤镜创建独立CALayer
• 为每类局部修图效果单独存储数据：对应的UIBezierPath路径、滤镜参数、作用强度，仅存原始数据不提前渲染成位图
• 统一维护渲染管线，在用户交互结束/参数调整时执行一次渲染：
  1. 取原始CIImage作为输入源
  2. 按顺序遍历所有激活的局部修图效果，先通过CIConstantColorGenerator+CIShapeBlur生成带羽化边缘的蒙版CIImage
  3. 用CIBlendWithMask滤镜，将当前滤镜处理后的图像和上一步的渲染结果，按蒙版做区域混合
  4. 所有滤镜处理完成后，将最终CIImage渲染为CGImage，赋值给顶层的叠加CALayer或者直接更新UIImageView的image
• 交互过程中可临时降低渲染分辨率保证流畅度，松手后再输出高清结果

示例渲染代码片段：

func renderFinalImage(base: CIImage, filters: [LocalFilter]) -> CIImage? {
    var outputImage = base
    for localFilter in filters {
        // 生成当前滤镜处理后的图
        let filteredImage = localFilter.filter.apply(to: outputImage)
        // 生成路径蒙版
        let mask = CIImage(color: CIColor(red: 1, green: 1, blue: 1, alpha: localFilter.intensity))
            .cropped(to: outputImage.extent)
            .applyingFilter("CIShapeBlur", parameters: [
                kCIInputRadiusKey: 4, // 边缘羽化值
                kCIInputImageKey: mask,
                kCIInputPathKey: localFilter.bezierPath.cgPath
            ])
        // 按蒙版混合
        outputImage = filteredImage.applyingFilter("CIBlendWithMask", parameters: [
            kCIInputBackgroundImageKey: outputImage,
            kCIInputMaskImageKey: mask
        ])
    }
    return outputImage
}

方案2：多CALayer架构适配 #

如果业务要求必须分层管理每个滤镜的显隐、独立调整，可修改原有层的配置逻辑解决叠加问题：

• 每个滤镜层的isOpaque设为false，backgroundColor设为UIColor.clear.cgColor，确保未被蒙版覆盖的区域完全透明
• 滤镜层的contents不再是滤镜作用于原图的结果，改为作用于下一层渲染结果的输出，避免多滤镜效果互相抵消
• 将用户绘制的UIBezierPath封装为CAShapeLayer，赋值给当前滤镜层的mask属性，仅保留绘制区域的滤镜效果，未绘制区域完全透给下层

示例蒙版配置代码：

let maskLayer = CAShapeLayer()
maskLayer.path = userDrawPath.cgPath
maskLayer.fillColor = UIColor.white.cgColor
maskLayer.opacity = filterIntensity // 控制当前滤镜作用强度
smoothLayer.mask = maskLayer

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