SwiftUI使用scaleEffect缩放后overlay内文本模糊如何解决

scaleEffect 本质是对视图完成渲染后的位图进行拉伸，而非重新渲染对应尺寸的矢量图形与文本，因此放大后会出现文本模糊、边缘锯齿的问题。

不需要调整你现有的overlay嵌套结构，仅需新增一个修饰符即可解决问题：在应用scaleEffect的视图上同步添加contentScale(_:)修饰符，将内容渲染分辨率与缩放倍数绑定，即可让文本保持清晰。

修改后的完整代码如下：

import SwiftUI

struct ZoomFontView: View {
    var body: some View {
        Rectangle()
            .frame(maxWidth: 100, maxHeight: 100)
            .foregroundColor(Color.yellow)
            .overlay(sub_view)
            .scaleEffect(6) // 此处为MagnificationGesture的占位实现
            .contentScale(UIScreen.main.scale * 6) // 新增这行即可
    }
    
    var sub_view: some View {
        ZStack {
        Rectangle()
            .frame(maxWidth: 70, maxHeight: 70)
            .foregroundColor(Color.mint)
            .overlay(Text("Hello"))
        }
    }
}

struct ZoomFontView_Previews: PreviewProvider {
    static var previews: some View {
        ZoomFontView()
    }
}

原理解释 #

contentScale 用于指定视图内容的渲染缩放因子，默认值与当前设备屏幕的缩放比例一致。你将缩放倍数同步传给这个参数后，系统会按照放大后的分辨率来渲染文本、矢量图形等元素，再进行缩放展示，就不会出现模糊锯齿的问题。

如果你的缩放系数是动态的（比如绑定到MagnificationGesture的实时缩放值），只要把contentScale的参数和你的缩放变量绑定即可，示例写法：

@State private var zoomScale: CGFloat = 1.0

// 对应修饰符写法
.scaleEffect(zoomScale)
.contentScale(UIScreen.main.scale * zoomScale)

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