SwiftUI中如何将Text转为Path并应用图形变换？

核心问题根源 #

Text.toPath()生成的Path基于文本字形的基线左下角原点，而SwiftUI容器布局的坐标原点在左上角，直接使用会导致对齐偏移；另外CGAffineTransform默认以(0,0)为变换原点（即字形原始原点），而非容器中心，因此缩放、旋转时会出现错位。

最优解决步骤 #

1. 获取文本精确边界
   用UIFont匹配SwiftUI的字体，计算文本的boundingRect，得到文本的宽高和基线偏移数据，这是对齐的核心依据。

2. 调整Path到容器对齐位置
   根据容器尺寸和文本边界，计算平移偏移量，将Path从字形原点移动到容器的目标位置（比如居中对齐）。

3. 正确应用变换

   • 优先使用SwiftUI原生的rotationEffect、scaleEffect、skewEffect等修饰符，这些默认以视图中心为变换原点，无需手动调整。
   • 若必须使用CGAffineTransform，需先将Path平移到变换原点（如容器中心），应用变换后再平移回原位置。

完整示例代码 #

import SwiftUI

struct TextPathView: View {
    let text: String
    let font: Font = .system(size: 40, weight: .bold)
    
    var body: some View {
        GeometryReader { proxy in
            let containerSize = proxy.size
            // 转换SwiftUI Font到UIFont，计算文本边界
            let uiFont = UIFont(font) ?? .systemFont(ofSize: 40, weight: .bold)
            let textBounds = text.boundingRect(
                with: CGSize(width: .infinity, height: .infinity),
                options: .usesLineFragmentOrigin,
                attributes: [.font: uiFont],
                context: nil
            )
            
            // 计算居中对齐的偏移量
            let offsetX = (containerSize.width - textBounds.width) / 2 - textBounds.minX
            let offsetY = (containerSize.height - textBounds.height) / 2 + (textBounds.height - textBounds.maxY)
            
            Text(text)
                .font(font)
                .toPath()
                .offset(x: offsetX, y: offsetY)
                // 方式一：SwiftUI原生变换修饰符（推荐）
                .rotationEffect(.degrees(15))
                .scaleEffect(x: 1.2, y: 1.2)
                .skewEffect(x: 0.1)
                .stroke(Color.red, lineWidth: 2)
        }
        .frame(width: 300, height: 200)
        .border(Color.gray)
    }
}

// 扩展Text获取Path
extension Text {
    func toPath() -> Path {
        let attributedString = AttributedString(self)
        let uiString = NSAttributedString(attributedString)
        let path = UIBezierPath()
        let glyphRange = NSRange(location: 0, length: uiString.length)
        
        uiString.enumerateAttributes(in: glyphRange) { attrs, range, _ in
            let line = CTLineCreateWithAttributedString(uiString.attributedSubstring(from: range))
            let runs = CTLineGetGlyphRuns(line) as! [CTRun]
            
            for run in runs {
                let runFont = CTRunGetAttributes(run)[kCTFontAttributeName] as! CTFont
                let glyphCount = CTRunGetGlyphCount(run)
                
                for glyphIndex in 0..<glyphCount {
                    let glyphRange = CFRangeMake(glyphIndex, 1)
                    var glyph = CGGlyph()
                    var position = CGPoint()
                    
                    CTRunGetGlyphs(run, glyphRange, &glyph)
                    CTRunGetPositions(run, glyphRange, &position)
                    
                    if let glyphPath = CTFontCreatePathForGlyph(runFont, glyph, nil) {
                        path.append(UIBezierPath(cgPath: glyphPath))
                        path.apply(CGAffineTransform(translationX: position.x, y: position.y))
                    }
                }
            }
        }
        
        return Path(path.cgPath)
    }
}

struct TextPathView_Previews: PreviewProvider {
    static var previews: some View {
        TextPathView(text: "Hello SwiftUI")
    }
}

关键注意事项 #

• 必须用UIFont匹配SwiftUI的Font，否则boundingRect计算会有误差，导致对齐不准。
• 使用SwiftUI原生变换修饰符时，系统自动以视图中心为基准，是最省心的方案。
• 若使用CGAffineTransform，需先平移Path到变换原点，变换完成后再平移回原位置，避免偏移。

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