SwiftUI二维码识别后无法正确显示Bounding Box问题排查

核心问题根源 #

AVFoundation检测二维码返回的CGRect基于图像缓冲区坐标系（原点左上，y轴向下），而SwiftUI视图/摄像头预览层可能存在缩放、设备方向旋转，静态图片还可能携带EXIF方向信息，导致坐标系不匹配，最终Bounding Box偏移。

场景一：摄像头预览下的坐标修正 #

直接依赖AVFoundation提供的坐标系转换方法，避免手动计算误差，同时处理设备方向同步。

1. 封装摄像头预览组件（含二维码检测） #

import SwiftUI
import AVFoundation

struct CameraPreview: UIViewRepresentable {
    @Binding var detectedQRFrames: [CGRect]
    let session: AVCaptureSession
    
    func makeUIView(context: Context) -> UIView {
        let view = UIView(frame: UIScreen.main.bounds)
        let previewLayer = AVCaptureVideoPreviewLayer(session: session)
        previewLayer.videoGravity = .resizeAspectFill
        previewLayer.frame = view.bounds
        view.layer.addSublayer(previewLayer)
        
        let metadataOutput = AVCaptureMetadataOutput()
        if session.canAddOutput(metadataOutput) {
            session.addOutput(metadataOutput)
            metadataOutput.setMetadataObjectsDelegate(context.coordinator, queue: DispatchQueue.main)
            metadataOutput.metadataObjectTypes = [.qr]
        }
        
        context.coordinator.previewLayer = previewLayer
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject, AVCaptureMetadataOutputObjectsDelegate {
        let parent: CameraPreview
        var previewLayer: AVCaptureVideoPreviewLayer?
        
        init(parent: CameraPreview) {
            self.parent = parent
        }
        
        func metadataOutput(_ output: AVCaptureMetadataOutput, didOutput metadataObjects: [AVMetadataObject], from connection: AVCaptureConnection) {
            guard let qrObjects = metadataObjects as? [AVMetadataMachineReadableCodeObject],
                  let previewLayer = previewLayer else {
                parent.detectedQRFrames = []
                return
            }
            
            // 关键：用AVFoundation内置方法转换为预览层坐标系
            let convertedFrames = qrObjects.compactMap {
                previewLayer.transformedMetadataObject(for: $0)?.bounds
            }
            
            // 同步设备方向，避免横屏时偏移
            let orientation = UIDevice.current.orientation
            let videoOrientation = AVCaptureVideoOrientation(rawValue: orientation.rawValue) ?? .portrait
            if connection.isVideoOrientationSupported {
                connection.videoOrientation = videoOrientation
            }
            
            parent.detectedQRFrames = convertedFrames
        }
    }
}

2. SwiftUI视图中叠加Bounding Box #

struct QRScannerView: View {
    @State private var detectedQRFrames: [CGRect] = []
    private let session = AVCaptureSession()
    
    init() {
        // 初始化摄像头会话
        guard let device = AVCaptureDevice.default(.builtInWideAngleCamera, for: .video, position: .back) else { return }
        do {
            let input = try AVCaptureDeviceInput(device: device)
            if session.canAddInput(input) {
                session.addInput(input)
            }
            session.startRunning()
        } catch {
            print(error.localizedDescription)
        }
    }
    
    var body: some View {
        ZStack {
            CameraPreview(detectedQRFrames: $detectedQRFrames, session: session)
                .ignoresSafeArea()
            
            // 绘制定位框
            ForEach(detectedQRFrames.indices, id: \.self) { index in
                let frame = detectedQRFrames[index]
                Rectangle()
                    .stroke(Color.red, lineWidth: 2)
                    .frame(width: frame.width, height: frame.height)
                    .position(x: frame.minX + frame.width/2, y: frame.minY + frame.height/2)
            }
        }
    }
}

场景二：静态图片下的坐标修正 #

静态图片需处理EXIF方向，并将原始图片坐标缩放到SwiftUI视图显示尺寸。

完整实现代码 #

import SwiftUI
import AVFoundation
import PhotosUI

struct QRImageScannerView: View {
    @State private var selectedItem: PhotosPickerItem?
    @State private var image: UIImage?
    @State private var detectedQRFrames: [CGRect] = []
    
    var body: some View {
        VStack {
            PhotosPicker(selection: $selectedItem, matching: .images) {
                Text("选择图片")
            }
            
            if let image = image {
                ZStack(alignment: .topLeading) {
                    Image(uiImage: image)
                        .resizable()
                        .scaledToFit()
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .overlay(
                            GeometryReader { geo in
                                ForEach(detectedQRFrames.indices, id: \.self) { index in
                                    let frame = detectedQRFrames[index]
                                    // 缩放为视图内图片的实际坐标
                                    let scaledFrame = CGRect(
                                        x: frame.origin.x * geo.size.width / image.size.width,
                                        y: frame.origin.y * geo.size.height / image.size.height,
                                        width: frame.size.width * geo.size.width / image.size.width,
                                        height: frame.size.height * geo.size.height / image.size.height
                                    )
                                    Rectangle()
                                        .stroke(Color.blue, lineWidth: 2)
                                        .frame(width: scaledFrame.width, height: scaledFrame.height)
                                        .position(x: scaledFrame.minX + scaledFrame.width/2, y: scaledFrame.minY + scaledFrame.height/2)
                                }
                            }
                        )
                }
            }
        }
        .onChange(of: selectedItem) { newItem in
            Task {
                guard let data = try? await newItem?.loadTransferable(type: Data.self),
                      let uiImage = UIImage(data: data) else { return }
                
                image = uiImage
                detectQRCode(in: uiImage)
            }
        }
    }
    
    private func detectQRCode(in image: UIImage) {
        guard let ciImage = CIImage(image: image) else { return }
        
        let detector = CIDetector(ofType: CIDetectorTypeQRCode, context: nil, options: [CIDetectorAccuracy: CIDetectorAccuracyHigh])
        guard let features = detector?.features(in: ciImage) as? [CIQRCodeFeature] else {
            detectedQRFrames = []
            return
        }
        
        // 修正EXIF方向导致的坐标偏移
        detectedQRFrames = features.map { convertQRFrame($0.bounds, for: image) }
    }
    
    private func convertQRFrame(_ frame: CGRect, for image: UIImage) -> CGRect {
        var correctedFrame = frame
        
        switch image.imageOrientation {
        case .down:
            correctedFrame = CGRect(
                x: image.size.width - frame.maxX,
                y: image.size.height - frame.maxY,
                width: frame.width,
                height: frame.height
            ).applying(CGAffineTransform(rotationAngle: .pi))
        case .left:
            correctedFrame = CGRect(
                x: frame.origin.y,
                y: image.size.width - frame.maxX,
                width: frame.height,
                height: frame.width
            ).applying(CGAffineTransform(rotationAngle: -.pi/2))
        case .right:
            correctedFrame = CGRect(
                x: image.size.height - frame.maxY,
                y: frame.origin.x,
                width: frame.height,
                height: frame.width
            ).applying(CGAffineTransform(rotationAngle: .pi/2))
        case .up, .upMirrored, .downMirrored, .leftMirrored, .rightMirrored, @unknown default:
            break
        }
        
        return correctedFrame
    }
}

常见错误排查 #

1. 避免手动计算坐标：优先使用previewLayer.transformedMetadataObject(for:)，AVFoundation会自动处理预览层的缩放、旋转逻辑。
2. 设备方向同步：摄像头预览时必须保证AVCaptureConnection.videoOrientation与当前设备方向一致，横屏场景容易忽略这点。
3. EXIF方向处理：静态图片的二维码检测结果基于原始未旋转图片，必须根据UIImage.imageOrientation修正坐标。

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