在叠加层中缩放文本而不模糊答案

【问题标题】：Scale Text in overlay without blurring在叠加层中缩放文本而不模糊
【发布时间】：2022-07-02 22:22:00
【问题描述】：

我在overlay() 中有一个Text()。应用.scaleEffect()后，文字变得模糊/锯齿：

如何使文字保持清晰？ - 我希望绿色矩形和文本与黄色矩形一起缩放

（这是具有嵌套叠加层的复杂 UI 元素的简化版本。将叠加层移至 scaleEffect 下方是不可行的。）

import SwiftUI

struct ZoomFontView: View {
    var body: some View {
        Rectangle()
            .frame(maxWidth: 100, maxHeight: 100)
            .foregroundColor(Color.yellow)
            .overlay(sub_view)
            .scaleEffect(6) // Placeholder for MagnificationGesture
    }
    
    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()
    }
}

【问题讨论】：

标签： swiftui

【解决方案1】：

scaleEffect 像图像一样缩放视图，但您必须分别缩放背景和文本，为Text 缩放字体以便正确呈现。

这是一个可能的方法的演示。使用 Xcode 13.1 / iOS 15.1 测试

左：比例 = 1 右：比例 = 8

struct ZoomFontView: View {

    let scale: CGFloat = 8
    var body: some View {
        ZStack {
        Rectangle()
            .frame(maxWidth: 100, maxHeight: 100)
            .foregroundColor(Color.mint)
            .scaleEffect(1 * scale) // Placeholder for MagnificationGesture
            Text("Hello").font(.system(size: 18 * scale))
                .fixedSize()
        }
    }
}

backup

【讨论】：

谢谢，是的，这当然是可能的。但是，我有一个带有嵌套叠加层的复杂 UI，所以我不能使用 ZStacks。还有其他解决方法吗？
我已更新问题以反映约束

【解决方案2】：

文本和图像都在低级 CoreAnimation 层中渲染，该层依赖 GPU 渲染（又名 Metal）来显示为基于位图的图形。因此，如果您缩放正在渲染文本的图层，它将具有缩放图像的相同效果，换句话说，它将放大像素并使其尝试“抗锯齿”文本以使边缘更平滑。

因此您不必直接缩放图层，而是应该缩放font 以存档正确的结果。

Text("Hello")
  // scale is the scale factor you're applying to the layer.
  .font(.system(size: 16 * scale))

【讨论】：