如何消除ImageRenderer生成图片中的异常阴影？

尝试渲染一张包含彩色背景、标题和顶部边框的封面图。使用ImageRenderer从SwiftUI视图渲染图片时，标题和边框出现了奇怪的阴影，但该阴影在SwiftUI视图本身中并不存在。需要解决该问题，让标题和边框完全贴合背景。

@MainActor func renderCover() {
        let renderer = ImageRenderer(content: coverRenderView)
        renderer.scale = 6.0
        if let uiImage = renderer.uiImage {
            cover = uiImage
        }
    }

private var coverRenderView: some View {
        ZStack {
            Rectangle()
                .fill(color.gradient)
            CoverDetailsView(title: title, detailColor: detailColor, showBorder: true, showTitle: true)
        }
        .thumbnail(size: .largeThumbnail)
    }

struct CoverDetailsView: View {
    var title: String
    var detailColor: Color
    var showBorder: Bool
    var showTitle: Bool
    @State private var size: CGSize = .largeThumbnail
    var body: some View {
        ZStack {
            if showBorder {
                Rectangle()
                    .stroke(detailColor, lineWidth: 2)
                    .padding(size.width*0.06)
            }
            if showTitle {
                Text(title)
                    .font(.robotoSlab(size: 32, weight: .medium))
                    .multilineTextAlignment(.center)
                    .foregroundColor(detailColor)
                    .padding(size.width*0.15)
                    .offset(x: 0, y: -75)
            }
        }
    }
}

1. 给ImageRenderer设置不透明属性 #

ImageRenderer默认会处理透明通道，可能导致边缘出现半透明伪影。添加opaque = true强制渲染不透明内容，消除阴影：

@MainActor func renderCover() {
    let renderer = ImageRenderer(content: coverRenderView)
    renderer.scale = 6.0
    renderer.opaque = true // 新增：强制不透明渲染
    if let uiImage = renderer.uiImage {
        cover = uiImage
    }
}

2. 用GeometryReader获取实际视图尺寸 #

之前使用@State固定尺寸可能与实际渲染的视图尺寸不匹配，导致布局计算偏差。改用GeometryReader获取父视图的真实尺寸：

struct CoverDetailsView: View {
    var title: String
    var detailColor: Color
    var showBorder: Bool
    var showTitle: Bool
    
    var body: some View {
        GeometryReader { proxy in
            let size = proxy.size // 获取父视图的实际尺寸
            ZStack {
                if showBorder {
                    Rectangle()
                        .stroke(detailColor, lineWidth: 2)
                        .padding(size.width*0.06)
                }
                if showTitle {
                    Text(title)
                        .font(.robotoSlab(size: 32, weight: .medium))
                        .multilineTextAlignment(.center)
                        .foregroundColor(detailColor)
                        .padding(size.width*0.15)
                        .offset(x: 0, y: -75)
                }
            }
        }
    }
}

3. 确认背景完全不透明 #

检查color.gradient是否为完全不透明的渐变，如果颜色本身带有透明度，渲染时会出现混合阴影。确保使用的color是不透明的颜色值。

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