SwiftUI图片旋转背景可见问题修复及图库图片全屏实现

一、修复图片旋转后背景可见的问题 #

旋转后背景露出的核心原因是：图片按屏幕尺寸设置frame后旋转，导致图片边缘无法覆盖原容器区域，从而透出背景色。可以通过以下两种方式解决：

方案1：动态计算旋转后所需的最小尺寸 #

先根据旋转角度计算图片需要的最小宽高，确保旋转后依然覆盖整个屏幕，再裁剪到屏幕范围：

import SwiftUI

struct ContentView: View {
    @State var baseScale: CGFloat = 1.0
    @State var baseRotation: Angle = .zero
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Image("Image")
                    .resizable()
                    .scaledToFill()
                    .rotationEffect(baseRotation)
                    .scaleEffect(baseScale)
                    // 计算旋转后覆盖屏幕所需的最小尺寸
                    .frame(
                        width: geometry.size.width * max(1, abs(sin(baseRotation.radians)) + abs(cos(baseRotation.radians))),
                        height: geometry.size.height * max(1, abs(sin(baseRotation.radians)) + abs(cos(baseRotation.radians)))
                    )
                    .position(x: geometry.size.width/2, y: geometry.size.height/2)
                    // 裁剪超出屏幕的部分
                    .clipped()
            }
            .background(.white)
            .onAppear {
                baseRotation.degrees = 30.0
            }
        }
    }
}

方案2：调整视图顺序+裁剪 #

将rotationEffect放在frame之前，再通过clipped()裁剪超出屏幕的部分，同时确保图片始终填充容器：

import SwiftUI

struct ContentView: View {
    @State var baseScale: CGFloat = 1.0
    @State var baseRotation: Angle = .zero
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Image("Image")
                    .resizable()
                    .rotationEffect(baseRotation)
                    .scaleEffect(baseScale)
                    .scaledToFill()
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .clipped()
            }
            .background(.white)
            .onAppear {
                baseRotation.degrees = 30.0
            }
        }
    }
}

二、实现图库选图全屏显示 #

通过PhotosPicker获取图库图片，加载后全屏显示，同时沿用上述旋转缩放的处理逻辑，避免背景露出：

import SwiftUI
import PhotosUI
import UIKit

struct FullScreenImageView: View {
    @State var selectedItem: PhotosPickerItem?
    @State var uiImage: UIImage?
    @State var baseScale: CGFloat = 1.0
    @State var baseRotation: Angle = .zero
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                if let uiImage = uiImage {
                    Image(uiImage: uiImage)
                        .resizable()
                        .scaledToFill()
                        .rotationEffect(baseRotation)
                        .scaleEffect(baseScale)
                        .frame(
                            width: geometry.size.width * max(1, abs(sin(baseRotation.radians)) + abs(cos(baseRotation.radians))),
                            height: geometry.size.height * max(1, abs(sin(baseRotation.radians)) + abs(cos(baseRotation.radians)))
                        )
                        .position(x: geometry.size.width/2, y: geometry.size.height/2)
                        .clipped()
                } else {
                    Color.white
                        .overlay(
                            PhotosPicker(selection: $selectedItem, matching: .images) {
                                Text("选择图片")
                                    .font(.title)
                                    .foregroundColor(.blue)
                            }
                        )
                }
            }
            .background(.white)
            .onChange(of: selectedItem) { newItem in
                Task {
                    if let data = try? await newItem?.loadTransferable(type: Data.self),
                       let image = UIImage(data: data) {
                        uiImage = image
                    }
                }
            }
            // 示例：添加旋转缩放控制（可根据需求自定义）
            .toolbar {
                ToolbarItemGroup(placement: .bottomBar) {
                    Button("旋转+90°") {
                        baseRotation.degrees += 90
                    }
                    Button("放大") {
                        baseScale += 0.2
                    }
                    Button("缩小") {
                        baseScale = max(0.5, baseScale - 0.2)
                    }
                }
            }
        }
        .ignoresSafeArea()
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        NavigationStack {
            FullScreenImageView()
        }
    }
}

关键说明： #

• 使用PhotosPicker获取图库图片，通过loadTransferable将选中的图片转为UIImage
• 全屏显示时添加.ignoresSafeArea()，确保图片覆盖整个屏幕（包括安全区）
• 沿用旋转后尺寸计算+裁剪的逻辑，保证旋转缩放时不会露出背景

内容的提问来源于stack exchange，提问作者Игорь Шварев