使用LinearGradient时ImageRenderer导出PDF与窗口渲染不一致求助

环境 #

• Xcode 14.3.1
• macOS 13.5.1

问题描述 #

参考Apple官方文档用ImageRenderer将SwiftUI视图导出为PDF文件时，视图中包含LinearGradient的情况下，PDF中的渲染效果与实际窗口显示不一致。

相关代码如下：

let size = CGSize(width: 480, height: 480)

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Save PDF") { renderImage() }
                .buttonStyle(.bordered)
            RenderView()
        }
        .padding()
    }
    
    @MainActor
    func renderImage() {
        let renderer = ImageRenderer(
            content: RenderView()
                .frame(width: size.width, height: size.height)
        )
        renderer.render { size, renderer in
            var mediaBox = CGRect(origin: .zero, size: size)
            guard let consumer = CGDataConsumer(url: URL(filePath: "/****/Hoge.pdf") as CFURL),
                  let pdfContext = CGContext(consumer: consumer, mediaBox: &mediaBox, nil)
            else {
                return
            }
            pdfContext.beginPDFPage(nil)
            pdfContext.translateBy(
                x: mediaBox.size.width / 2 - size.width / 2,
                y: mediaBox.size.height / 2 - size.height / 2
            )
            renderer(pdfContext)
            pdfContext.endPDFPage()
            pdfContext.closePDF()
        }
    }
}

struct RenderView: View {
    
    var body: some View {
        ZStack {
            Text("Hello, World!")
                .font(.largeTitle)
                .foregroundStyle(.white)
            LinearGradient(
                colors: [.clear, .clear, .white],
                startPoint: .top,
                endPoint: .bottom
            )
            .opacity(0.4)
        }
        .frame(width: size.width, height: size.height)
        .background(Color.red)
        .cornerRadius(16)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

截图对比 #

• 实际窗口渲染视图：
  
• PDF文件渲染视图：
  

解决方案 #

这个问题源于ImageRenderer在PDF上下文渲染时，对透明渐变的处理逻辑差异，可通过以下两种方式解决：

方法一：替换透明色为带alpha的白色 #

将LinearGradient中的.clear替换为Color.white.opacity(0)，让PDF渲染时能正确识别渐变的透明度层级：

LinearGradient(
    colors: [Color.white.opacity(0), Color.white.opacity(0), .white],
    startPoint: .top,
    endPoint: .bottom
)
.opacity(0.4)

方法二：添加drawingGroup()优化渲染 #

在RenderView的根视图上追加.drawingGroup()，让SwiftUI先将视图预合成位图，再渲染到PDF上下文，确保显示效果一致：

struct RenderView: View {
    var body: some View {
        ZStack {
            Text("Hello, World!")
                .font(.largeTitle)
                .foregroundStyle(.white)
            LinearGradient(
                colors: [.clear, .clear, .white],
                startPoint: .top,
                endPoint: .bottom
            )
            .opacity(0.4)
        }
        .frame(width: size.width, height: size.height)
        .background(Color.red)
        .cornerRadius(16)
        .drawingGroup() // 添加此行
    }
}

补充说明 #

方法一能保留PDF的矢量特性，文件体积更小；方法二会将视图转为位图渲染，可能增大文件体积，但适配更多复杂渲染场景，可根据需求选择。

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