Question

我正在尝试将类似目标的叠加层添加到使用在某些设备上为人像，在其他设备上为风景。我可以手动设置坐标，但是无法获得相机预览帧的正确坐标。

这是一个SwiftUI应用程序，所以我正在使用 UIViewControllerRepresentable。这就是我所拥有的，显然，目标圈子是当设备和/或方向改变时，总是错误的。我似乎无法捕捉相机预览所在的模式视图的框架。我愿意成为能够在模式视图中指定相机预览的框架和位置。

struct CaptureImageView: View {
    @Binding var isShown: Bool
    @Binding var image: Image?
    @Binding var newUIImage: UIImage?
    @Binding var showSaveButton: Bool

    func makeCoordinator() -> Coordinator {
        return Coordinator(isShown: $isShown, image: $newUIImage, showSaveButton: $showSaveButton)
    }
}

extension CaptureImageView: UIViewControllerRepresentable {

    func makeUIViewController(context: UIViewControllerRepresentableContext<CaptureImageView>) -> UIImagePickerController {

        let vc = UIImagePickerController()

        if UIImagePickerController.isSourceTypeAvailable(UIImagePickerController.SourceType.camera) {
            vc.sourceType = .camera
            vc.allowsEditing = true
            vc.delegate = context.coordinator

            let screenSize: CGRect = UIScreen.main.bounds
            let screenWidth = screenSize.width
            let screenHeight = screenSize.height

            vc.cameraOverlayView = CircleView(frame: CGRect(x: (screenWidth / 2) - 50, y: (screenWidth / 2) + 25, width: 100, height: 100))

            return vc
        }
        return UIImagePickerController()
    }

    func updateUIViewController(_ uiViewController: UIImagePickerController, context: UIViewControllerRepresentableContext<CaptureImageView>) {
    }
}

这是想法-但目标始终需要居中：

目标文件：

class CircleView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = UIColor.clear
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func draw(_ rect: CGRect) {
        if let context = UIGraphicsGetCurrentContext() {
            context.setLineWidth(3.0)
            UIColor.red.set()

            let center = CGPoint(x: frame.size.width / 2, y: frame.size.height / 2)
            let radius = (frame.size.width - 10) / 2

            context.addArc(center: center, radius: radius, startAngle: 0.0, endAngle: .pi * 2.0, clockwise: true)
            context.strokePath()
        }
    }
}

任何指导将不胜感激。 Xcode版本11.3.1（11C504）

Answer 1

虽然我仍然想找到获取相机框架的方法的答案-我的目标主要可以通过在VStack中创建如下的圆形视图来实现：

const customerInformation = [
{"id":"12345678","timestamp":"2019-01-21T11:53:29.338Z","userConnection":"1942f0e6","ownerId":"234566654","exec":{"execId":"20326379004","eventTime":"2019-01-21T11:53:29.223Z","communication":[{"name":"John Smith","accountId":"234566654","comid":"cs169612397275616092-1","status":"Active","phoneNumber":"+442222222222","extensionId":"234566654","missedCall":false,"standAlone":false,"muted":false}]}},
{"id":"6374595864","timestamp":"2019-01-21T11:53:29.338Z","userConnection":"1942f0e6","ownerId":"155464348743","exec":{"execId":"1521648743","eventTime":"2019-01-21T11:53:29.223Z","communication":[{"name":"Math Lo","accountId":"26726447342","comid":"cs169612397275616092-1","status":"Active","phoneNumber":"+442222222222","extensionId":"234566654","missedCall":false,"standAlone":false,"muted":false}]}},
{"id":"98736478","timestamp":"2019-01-21T11:53:29.338Z","userConnection":"hblwrv890","ownerId":"98765322","exec":{"execId":"20326379004","eventTime":"2019-01-21T11:53:29.223Z","communication":[{"name":"James Olive","accountId":"234566654","comid":"cs169612397275616092-2","status":"Active","phoneNumber":"+442222222222","extensionId":"2763648749","missedCall":false,"standAlone":false,"muted":false}]}},
{"id":"256644477","timestamp":"2019-01-21T11:53:29.338Z","userConnection":"sbdbbgbg","ownerId":"32545453565","exec":{"execId":"32254655464","eventTime":"2019-01-21T11:53:29.223Z","communication":[{"name":"Ben Right","accountId":"234566654","comid":"cs169612397275616092-2","status":"Active","phoneNumber":"+442222222222","extensionId":"2763648749","missedCall":false,"standAlone":false,"muted":false}]}},
{"id":"99326672378372","timestamp":"2019-01-21T11:53:29.338Z","userConnection":"sjvjvnfrrev","ownerId":"28643872329","exec":{"execId":"268474374938","eventTime":"2019-01-21T11:53:29.223Z","communication":[{"name":"Lowe John","accountId":"2225454354","comid":"cs169612397275616092-2","status":"Active","phoneNumber":"+442222222222","extensionId":"2763648749","missedCall":false,"standAlone":false,"muted":false}]}},
]

const map = {};
const newArr = [];

for (const info of customerInformation) {
    const id = info.exec.communication[0].comid;
    if (!map[id]) {
	map[id] = {};
	newArr.push(map[id]);
    }
    Object.assign(map[id], {
	ownerId: info.ownerId,
	comid: id,
	extensionId: info.id,
	userConnection: info.userConnection
	// add whatever fields and other logic you want here
    });
}

console.log('customerInformation', newArr);

Answer 2

如GrandSteph所述-更好的方法是将摄影机视图包装在Geometry Reader中。这是一种方法：

if showCaptureImageView {
    ZStack {
        VStack {
            Rectangle()//just to show that the circle below can be centered
                    .frame(width: 300, height: 150)
                    .background(Color.blue)

            GeometryReader { geo in
                CaptureImageView(isShown: self.$showCaptureImageView, image: self.$image)
                .onAppear {
                    self.cameraWindowWidth = geo.size.width
                    self.cameraWindowHeight = geo.size.height
                }
            }//geo
        }//v

        Circle().frame(width: 50, height: 50)
        .position(x: self.cameraWindowWidth / 2, y: (self.cameraWindowHeight / 2) + 150)
        .foregroundColor(.red)

    }//z
}//if show

相机预览上的SwiftUI位置叠加

2 个答案: