SwiftUI如何获取视图下方背景色以动态反转文本前景色？

要实现文本根据自身下方背景的精确像素色动态调整前景色（而非图片平均色），核心难点在于SwiftUI没有直接提供读取视图某点像素的API，需要借助UIKit/AppKit的底层图形能力完成。以下是支持双平台的完整解决方案：

核心思路 #

1. 将文本所在位置的背景区域渲染为临时图片
2. 转换文本坐标到图片坐标系，读取对应像素的RGB值
3. 根据像素的亮度值（luminance）切换文本为白色/黑色，保证可读性

完整实现代码 #

1. 跨平台像素颜色读取工具类 #

import SwiftUI

#if os(iOS)
import UIKit
typealias PlatformImage = UIImage
#elseif os(macOS)
import AppKit
typealias PlatformImage = NSImage
#endif

extension PlatformImage {
    /// 获取图片指定坐标的颜色
    func color(at point: CGPoint) -> Color? {
        #if os(iOS)
        guard let cgImage = self.cgImage else { return nil }
        let width = cgImage.width
        let height = cgImage.height
        guard point.x >= 0, point.x < CGFloat(width), point.y >= 0, point.y < CGFloat(height) else {
            return nil
        }
        
        let pixelData = cgImage.dataProvider?.data
        guard let data = CFDataGetBytePtr(pixelData) else { return nil }
        
        let bytesPerPixel = 4
        let pixelInfo = Int(point.y) * width * bytesPerPixel + Int(point.x) * bytesPerPixel
        
        let r = CGFloat(data[pixelInfo]) / 255.0
        let g = CGFloat(data[pixelInfo + 1]) / 255.0
        let b = CGFloat(data[pixelInfo + 2]) / 255.0
        let a = CGFloat(data[pixelInfo + 3]) / 255.0
        
        return Color(red: r, green: g, blue: b, opacity: a)
        #elseif os(macOS)
        guard let cgImage = self.cgImage(forProposedRect: nil, context: nil, hints: nil) else { return nil }
        let width = cgImage.width
        let height = cgImage.height
        guard point.x >= 0, point.x < CGFloat(width), point.y >= 0, point.y < CGFloat(height) else {
            return nil
        }
        
        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let bytesPerPixel = 4
        let bytesPerRow = bytesPerPixel * width
        let bitsPerComponent = 8
        var pixelData = [UInt8](repeating: 0, count: width * height * bytesPerPixel)
        
        guard let context = CGContext(data: &pixelData,
                                      width: width,
                                      height: height,
                                      bitsPerComponent: bitsPerComponent,
                                      bytesPerRow: bytesPerRow,
                                      space: colorSpace,
                                      bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue) else {
            return nil
        }
        
        context.draw(cgImage, in: CGRect(x: 0, y: 0, width: width, height: height))
        
        let pixelInfo = Int(point.y) * width * bytesPerPixel + Int(point.x) * bytesPerPixel
        let r = CGFloat(pixelData[pixelInfo]) / 255.0
        let g = CGFloat(pixelData[pixelInfo + 1]) / 255.0
        let b = CGFloat(pixelData[pixelInfo + 2]) / 255.0
        let a = CGFloat(pixelData[pixelInfo + 3]) / 255.0
        
        return Color(red: r, green: g, blue: b, opacity: a)
        #endif
    }
}

2. 背景像素读取器与动态文本封装 #

// 读取指定坐标背景色的视图
struct BackgroundPixelReader: View {
    let coordinateSpace: CoordinateSpace
    let targetPoint: CGPoint
    @Binding var detectedColor: Color?
    
    var body: some View {
        Color.clear
            .background(
                GeometryReader { geo in
                    Color.clear
                        .onAppear {
                            // 转换文本本地坐标到全局坐标
                            let globalRect = geo.frame(in: coordinateSpace)
                            let targetGlobalPoint = CGPoint(
                                x: globalRect.origin.x + targetPoint.x,
                                y: globalRect.origin.y + targetPoint.y
                            )
                            // 捕获背景像素色
                            captureBackground(at: targetGlobalPoint) { color in
                                DispatchQueue.main.async {
                                    self.detectedColor = color
                                }
                            }
                        }
                        // 若背景动态变化（如滚动图片），添加监听重新捕获
                        .onChange(of: geo.frame(in: coordinateSpace)) { _ in
                            let globalRect = geo.frame(in: coordinateSpace)
                            let targetGlobalPoint = CGPoint(
                                x: globalRect.origin.x + targetPoint.x,
                                y: globalRect.origin.y + targetPoint.y
                            )
                            captureBackground(at: targetGlobalPoint) { color in
                                DispatchQueue.main.async {
                                    self.detectedColor = color
                                }
                            }
                        }
                }
            )
    }
    
    /// 捕获窗口中指定坐标的背景色
    private func captureBackground(at point: CGPoint, completion: @escaping (Color?) -> Void) {
        #if os(iOS)
        guard let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) else {
            completion(nil)
            return
        }
        // 捕获指定1x1区域的图片
        let captureRect = CGRect(origin: point, size: CGSize(width: 1, height: 1))
        let renderer = UIGraphicsImageRenderer(bounds: captureRect)
        let image = renderer.image { context in
            window.drawHierarchy(in: window.bounds, afterScreenUpdates: true)
        }
        // 转换图片坐标（窗口坐标到图片本地坐标）
        let imagePoint = CGPoint(x: 0, y: 0)
        completion(image.color(at: imagePoint))
        #elseif os(macOS)
        guard let window = NSApplication.shared.windows.first(where: { $0.isKeyWindow }) else {
            completion(nil)
            return
        }
        let captureRect = CGRect(origin: point, size: CGSize(width: 1, height: 1))
        guard let imageRep = window.contentView?.bitmapImageRepForCachingDisplay(in: captureRect) else {
            completion(nil)
            return
        }
        window.contentView?.cacheDisplay(in: captureRect, to: imageRep)
        guard let cgImage = imageRep.cgImage else {
            completion(nil)
            return
        }
        let platformImage = PlatformImage(cgImage: cgImage)
        completion(platformImage.color(at: CGPoint(x: 0, y: 0)))
        #endif
    }
}

// 自动适配背景色的文本视图
struct DynamicReadableText: View {
    let text: String
    let font: Font
    @State private var detectedBackgroundColor: Color? = nil
    
    private var adaptiveTextColor: Color {
        guard let color = detectedBackgroundColor else { return .black }
        // 根据亮度反转颜色：亮度<0.5用白色，否则用黑色
        return color.luminance < 0.5 ? .white : .black
    }
    
    init(text: String, font: Font = .title) {
        self.text = text
        self.font = font
    }
    
    var body: some View {
        Text(text)
            .font(font)
            .padding()
            .foregroundColor(adaptiveTextColor)
            .background(
                GeometryReader { geo in
                    BackgroundPixelReader(
                        coordinateSpace: .global,
                        // 取文本中心位置的像素色
                        targetPoint: CGPoint(x: geo.size.width / 2, y: geo.size.height / 2),
                        detectedColor: $detectedBackgroundColor
                    )
                }
            )
    }
}

3. 使用示例（匹配你的场景） #

struct ContentView: View {
    var body: some View {
        ZStack {
            // 替换为你的实际背景图片/视图
            Image("dynamic-background")
                .resizable()
                .scaledToFill()
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            // 动态文本自动适配下方背景色
            DynamicReadableText(text: "动态可读文本")
        }
        .ignoresSafeArea()
    }
}

关键注意事项 #

• 该方案捕获窗口层级的渲染结果，能精准获取文本下方的实际像素色，避免了平均色的偏差问题
• 跨平台适配：通过#if os区分iOS/macOS的图形API差异，保证双平台兼容
• 动态背景适配：若背景是滚动/动态变化的，已通过onChange监听视图位置变化，自动重新捕获颜色

内容的提问来源于stack exchange，提问作者Ash-Bash32