如何在 SwiftUI 中相对于不同坐标系中的其他视图定位视图

Question

我正在尝试使用 SwiftUI 在我的应用中实现拖放功能。

我创建了两个圆圈，它们位于两个不同的HStacks 中。它们不共享相同的坐标空间。

有笔划的圆圈是目标，绿色的实心圆圈是要拖动的对象。

我能够在.overlay 中使用GeometryReader 获得他们的绝对位置。我用它来检测当对象圆被拖动到目标圆上时它们是否重叠。这行得通。

当它们不重叠时，对象圆将移回其原始位置。当它们重叠时，对象圆应该在目标圆的位置卡入到位。这是我似乎有问题的地方。

我正在尝试通过以下方式设置对象圆的新 X 和 Y 位置： 对象圆局部位置-对象圆全局位置+目标圆全局位置。

    objectPosition = CGPoint(
        x: objectPosition.x - objectFrame.midX + targetFrame.midX,
        y: objectPosition.y - objectFrame.midY + targetFrame.midY
   )

我假设这会将我带到目标圆的坐标空间。但不知何故，它不起作用。

到目前为止，我一直无法找到一种可靠且简单的方法来在 SwiftUI 中转换坐标空间。在叠加层内使用GeometryReader 的解决方法至少给了我正确的全局位置。但是我还没有找到一种方法来使用这些位置将视图也放置在.global 坐标空间中。

如果有人知道为什么我对坐标空间的计算是错误的，或者甚至知道一种方法可以更轻松地相互转换和定位视图，我将不胜感激。

这是我的 SwiftUI 单视图 iOS 应用程序代码：

import SwiftUI

struct ContentView: View {
    
    @State private var isDragging: Bool = false
    
    @State private var objectDragOffset: CGSize = .zero
    @State private var objectPosition: CGPoint = .zero
    
    @State private var objectFrame: CGRect = .zero
    @State private var targetFrame: CGRect = .zero
    
    var body: some View {
        VStack {
            HStack {
                Circle()
                    .stroke(lineWidth: 3)
                    .fill(Color.blue)
                    .frame(width: 100.0, height: 100.0)
                    .overlay(
                        GeometryReader { targetGeometry in
                            Color(.clear)
                                .onAppear { targetFrame = targetGeometry.frame(in: .global) }
                        }
                    )
                    .position(CGPoint(x:180, y: 190))
            }.background(Color.yellow)
            HStack {
                Circle()
                    .foregroundColor(.green)
                    .frame(width: 100, height: 100, alignment: .center)
                    .overlay(
                        GeometryReader { objectGeometry in
                            Color(.clear)
                                .onAppear {
                                    objectFrame = objectGeometry.frame(in: .global) }
                        }
                    )
                    .position(objectPosition)
                    .offset( isDragging ? objectDragOffset : .zero)
                    .onAppear { objectPosition = CGPoint(x: 200, y: 250 ) }
                    .gesture(
                        DragGesture(coordinateSpace: .global)
                            .onChanged { drag in
                                isDragging = true
                                objectDragOffset = drag.translation
                            }
                            .onEnded { drag in
                                isDragging = false
                                
                                if targetFrame.contains(drag.location) {
                                    objectPosition = CGPoint(
                                        x: objectPosition.x - objectFrame.midX + targetFrame.midX,
                                        y: objectPosition.y - objectFrame.midY + targetFrame.midY
                                    )
                                } else {
                                    objectPosition = CGPoint(x: 200, y: 250 )
                                }
                            }
                    )
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

经过多次尝试，我找到了一个可行的解决方案，无论创建了多少视图。 使用GeometryReader 作为每个Circle 的父级，我得到了要拖动的对象的.global 和.local 位置。我从它的局部位置中减去全局位置，然后我添加目标的全局位置。这给了我对象的新绝对位置，它的目的地，在它的局部坐标空间中。 为了方便和将来使用，我的代码还实现了拖放以及ViewModifier 的Circle。 我正在使用Circles 的两个底层CGRects 来测试交叉点。 需要注意的是，圆的初始位置也是使用GeometryReader设置的

如果可以简化，请发表您的评论或回答。

import SwiftUI

struct ContentView: View {
    
    @State private var isDragging: Bool = false
    @State private var atTarget: Bool = false
    
    @State private var objectDragOffset: CGSize = .zero
    @State private var objectPosition: CGPoint = .zero
    @State private var objectGlobalPosition: CGPoint = .zero
    
    @State private var targetGlobalPossition: CGPoint = .zero
    
    @State private var newObjectPosition: CGPoint = .zero
    
    var body: some View {
        
        VStack {
            HStack {
                GeometryReader { geometry in
                    Circle()
                        .stroke(lineWidth: 3)
                        .fill(Color.blue)
                        .modifier(CircleModifier())
                        .position(CGPoint(x:geometry.frame(in: .local).midX, y: geometry.frame(in: .local).midY))
                        .onAppear() {
                            targetGlobalPossition = CGPoint(x:geometry.frame(in: .global).midX, y: geometry.frame(in: .global).midY)
                        }
                }
            }.background(Color.yellow)
            
            HStack {
                GeometryReader { geometry in
                    Circle()
                        .foregroundColor(.red)
                        .position(atTarget ? newObjectPosition : CGPoint(x:geometry.frame(in: .local).midX, y: geometry.frame(in: .local).midY))
                        .modifier(CircleModifier())
                        .onAppear() {
                            objectPosition = CGPoint(x:geometry.frame(in: .local).midX, y: geometry.frame(in: .local).midY)
                            objectGlobalPosition = CGPoint(x:geometry.frame(in: .global).midX, y: geometry.frame(in: .global).midY)
                        }
                        .offset( isDragging ? objectDragOffset : .zero)
                        .gesture(
                            DragGesture(coordinateSpace: .global)
                                .onChanged { drag in
                                    isDragging = true
                                    objectDragOffset = drag.translation
                                }
                                .onEnded { drag in
                                    isDragging = false
                                    
                                    let targetFrame = CGRect(origin: targetGlobalPossition, size: CircleModifier.frame)
                                    let objectFrame = CGRect(origin: objectGlobalPosition, size: CircleModifier.frame)
                                        .offsetBy(dx: drag.translation.width, dy: drag.translation.height)
                                        .insetBy(dx: CircleModifier.frame.width * 0.1, dy: CircleModifier.frame.height * 0.1)
                                    
                                    if targetFrame.intersects(objectFrame) {
                                        // Will check for the intersection of the rectangeles, not the circles. See above insetBy adjustment to get a good middle ground.
                                        atTarget = true
                                    } else {
                                        atTarget = false
                                    }
                                }
                        )
                }
            }
        }.onAppear {
            newObjectPosition = CGPoint(
                x: objectPosition.x - objectGlobalPosition.x + targetGlobalPossition.x,
                y: objectPosition.y - objectGlobalPosition.y + targetGlobalPossition.y
            )
        }
    }
}

struct CircleModifier: ViewModifier {
    static let frame = CGSize(width: 100.0, height: 100.0)
    
    func body(content: Content) -> some View {
        content
            .frame(width: CircleModifier.frame.width, height: CircleModifier.frame.height, alignment: .center)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}