应用rotationEffect()后scaledToFit()失效的问题及适配方案咨询

问题根源 #

你当前的代码中，rotationEffect会改变视图的外接尺寸（旋转后图像的边界框会变大），而scaledToFit是在旋转之后执行，它只会适配旋转前的视图尺寸，导致旋转后的内容超出目标frame。

快速修复（针对固定角度） #

调整修饰符顺序，先让图像适配frame，再结合clipped()裁剪溢出部分：

Image(systemName: "trash.slash.fill")
    .resizable()
    .foregroundColor(.green)
    .scaledToFit()
    .frame(width: 100, height: 100)
    .rotationEffect(.degrees(20))
    .clipped() // 裁剪溢出的边缘
    .border(Color(white: 0.75))

通用解决方案（适配任意变换/角度） #

如果需要真正缩放适配而非裁剪，可以通过计算旋转后的外接尺寸，动态调整缩放因子，确保变换后的视图完全容纳在目标frame内：

struct FitAfterTransformView: View {
    // 可自定义旋转角度
    let rotationAngle: Double = 20
    // 目标frame尺寸
    let targetSize: CGSize = CGSize(width: 100, height: 100)
    
    var body: some View {
        GeometryReader { proxy in
            Image(systemName: "trash.slash.fill")
                .resizable()
                .foregroundColor(.green)
                // 先应用旋转
                .rotationEffect(.degrees(rotationAngle))
                // 根据旋转角度计算缩放比例，确保适配目标尺寸
                .scaleEffect(calculateScaleFactor(angle: rotationAngle, containerSize: proxy.size))
                .frame(width: proxy.size.width, height: proxy.size.height)
        }
        .frame(width: targetSize.width, height: targetSize.height)
        .border(Color(white: 0.75))
    }
    
    /// 计算旋转后适配容器的缩放因子
    private func calculateScaleFactor(angle: Double, containerSize: CGSize) -> CGFloat {
        let radians = CGFloat(angle * .pi / 180)
        let cosθ = cos(radians)
        let sinθ = sin(radians)
        
        // 计算旋转后外接矩形的宽高
        let rotatedWidth = containerSize.width * cosθ + containerSize.height * sinθ
        let rotatedHeight = containerSize.width * sinθ + containerSize.height * cosθ
        
        // 取最小缩放比例，确保宽高都能适配容器
        return min(containerSize.width / rotatedWidth, containerSize.height / rotatedHeight)
    }
}

核心原理 #

旋转（或其他几何变换）会改变视图的外接边界尺寸，我们需要先计算变换后的边界尺寸，再反向计算缩放因子，让变换后的视图刚好缩放到目标frame的范围内。这种方法适用于任意旋转角度，甚至可以扩展到其他仿射变换（如平移、拉伸）的场景。

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