SwiftUI带遮罩图片显示正常但保存后丢失遮罩问题求助

问题原因 #

1. 自定义reverseMask的实现可能未适配离线渲染场景，导致UIHostingController捕获视图时无法正确生成遮罩效果。
2. 原asImage方法存在窗口获取过时、未等待视图布局完成就截图的问题，导致遮罩未被正确渲染。

解决步骤 #

1. 修正reverseMask实现 #

确保你的reverseMask使用支持离线渲染的组合方式，替换成以下实现：

extension View {
    func reverseMask<Mask: View>(@ViewBuilder mask: () -> Mask) -> some View {
        self.mask(
            mask()
                .background(Color.black)
                .compositingGroup()
                .luminanceToAlpha()
        )
    }
}

这个实现利用compositingGroup和luminanceToAlpha确保遮罩效果在离线渲染时也能被正确捕获。

2. 改进View转UIImage的方法 #

替换原asImage扩展，解决窗口获取和渲染时机问题：

extension View {
    func asImage() -> UIImage {
        let controller = UIHostingController(rootView: self)
        let scene = UIApplication.shared.connectedScenes.first as? UIWindowScene
        guard let window = scene?.windows.first else {
            return UIImage()
        }
        
        // 添加视图到窗口并完成布局
        window.addSubview(controller.view)
        controller.view.frame = window.bounds
        controller.view.layoutIfNeeded()
        
        // 使用UIGraphicsImageRenderer正确捕获视图渲染效果
        let renderer = UIGraphicsImageRenderer(size: controller.view.intrinsicContentSize)
        let image = renderer.image { context in
            controller.view.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
        }
        
        controller.view.removeFromSuperview()
        return image
    }
}

• 改用connectedScenes获取当前窗口，适配iOS13+的多场景架构。
• 调用layoutIfNeeded()确保视图布局完成后再截图。
• 使用drawHierarchy(afterScreenUpdates: true)保证所有视图效果（包括遮罩）被完整渲染。

3. 测试保存代码 #

保持原保存代码不变，现在调用imageView.asImage()应该能生成带遮罩的图片：

UIImageWriteToSavedPhotosAlbum(imageView.asImage(), nil, nil, nil)

额外注意事项 #

• 如果你的DrawShape是自定义路径，确保路径的坐标系统在视图布局后是正确的，避免遮罩位置偏移。
• 若仍有问题，可以尝试给目标视图设置明确的尺寸（比如.frame(width: 300, height: 300)），避免intrinsicContentSize计算不准确。

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