如何在 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坐标空间中放置视图的.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位置。 我从其本地位置减去全局位置，然后添加目标的全局位置。 这为我提供了对象在其局部坐标空间中的新绝对位置，即其目的地。 我的代码还实现了拖放以及Circle的ViewModifier以方便和将来使用。 我正在使用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()
    }
}