使用GeometryReader绘制的路径位置偏移问题求助

问题描述 #

我正在开发一个简单的View，在onAppear时绘制一条从第三个圆形向上到第一个圆形，再到第二个圆形的路径。我使用GeometryReader和PreferenceKey来获取实际位置，看起来已经正确获取了圆心，但绘制的路径似乎比预期位置偏低一些。

原代码 #

struct ScreenPath: View {
    @State private var end = CGFloat.zero
    
    var positions: [CGPoint]
    var body: some View {
        Path { lineBuilder in
            let pathSequence = [positions[2], positions[0], positions[1]]
            if let start = pathSequence.first {
                lineBuilder.move(to: start)
                lineBuilder.addLine(to: pathSequence[1])
                lineBuilder.addLine(to: pathSequence[2])
            }
        }
        .trim(from: 0, to: end)
        .stroke(Color.green, lineWidth: 4)
        .animation(.easeIn(duration: 1.5))
        .onAppear {
            self.end = 1
        }
    }
}

struct HomeScreen: View {
    @State private var circlePositions: [CGPoint] = []
    @State private var colors: [Color] = [.white, .white, .white, .white]
    @State private var showPath: Bool = false
    
    var body: some View {
        GeometryReader { geo in
            
            ZStack {
                if showPath {
                    ScreenPath(positions: circlePositions)
                }  
                VStack(spacing: 30) {
                    VStack(spacing: 45) {
                        HStack {
                            Circle()
                                .fill(colors[0])
                                .frame(width: 30, height: 30)
                                .background(GeometryReader { circleGeo in
                                    
                                    Color.clear.preference(key: CirclePositionKey.self, value: [circleGeo.frame(in: .global).center])
                                })
                            
                            Spacer().frame(width: 50)
                            
                            Circle()
                                .fill(colors[1])
                                .frame(width: 30, height: 30)
                                .background(GeometryReader { circleGeo in
                                    Color.clear.preference(key: CirclePositionKey.self, value: [circleGeo.frame(in: .global).center])
                                })
                        }
                        
                        HStack {
                            Circle()
                                .fill(colors[2])
                                .frame(width: 30, height: 30)
                                .background(GeometryReader { circleGeo in
                                    Color.clear.preference(key: CirclePositionKey.self, value: [circleGeo.frame(in: .global).center])
                                })
                            
                            Spacer().frame(width: 50)
                            
                            Circle()
                                .fill(colors[3])
                                .frame(width: 30, height: 30)
                                .background(GeometryReader { circleGeo in
                                    Color.clear.preference(key: CirclePositionKey.self, value: [circleGeo.frame(in: .global).center])
                                })
                        }
                    }
                    
                    
                    
                }
                .frame(width: geo.size.width, height: geo.size.height, alignment: .center)
            }
            .onPreferenceChange(CirclePositionKey.self) { positions in
                if positions.count == 4 {
                    circlePositions = positions
                    for position in positions {
                        print("Circle position: \(position)")
                    }
                }
            }
            .onAppear {                
                colors[0] = .green
                colors[1] = .green
                colors[2] = .green
                
                showPath.toggle()
            }
        }
        .border(Color.red)
    }
}

extension CGRect {
    var center: CGPoint {
        return CGPoint(x: self.midX, y: self.midY)
    }
}

struct CirclePositionKey: PreferenceKey {
    typealias Value = [CGPoint]
    
    static var defaultValue: [CGPoint] = []
    
    static func reduce(value: inout [CGPoint], nextValue: () -> [CGPoint]) {
        value.append(contentsOf: nextValue())
    }
}

问题原因与解决方法 #

核心问题：坐标空间不匹配 #

你获取圆形位置时使用的是.global全局坐标，但绘制Path的ScreenPath位于GeometryReader内部的ZStack中，这里的默认坐标空间是本地坐标（相对于GeometryReader），两种坐标空间的偏移导致路径位置偏低。

修复步骤 #

1. 统一坐标空间

将获取圆心位置的坐标空间从.global改为.local，确保和绘制路径的空间一致：

// 修改每个圆形background里的代码
Color.clear.preference(key: CirclePositionKey.self, value: [circleGeo.frame(in: .local).center])

2. 优化PreferenceKey实现（避免位置顺序混乱）

原PreferenceKey的reduce方法会重复添加位置，且无法保证顺序和圆形的索引对应，建议修改为键值对类型来绑定索引与位置：

// 修改CirclePositionKey
struct CirclePositionKey: PreferenceKey {
    typealias Value = [Int: CGPoint]
    
    static var defaultValue: [Int: CGPoint] = [:]
    
    static func reduce(value: inout [Int: CGPoint], nextValue: () -> [Int: CGPoint]) {
        value.merge(nextValue()) { $1 }
    }
}

// 给每个圆形绑定索引
Circle()
    .fill(colors[0])
    .frame(width: 30, height: 30)
    .background(GeometryReader { circleGeo in
        Color.clear.preference(key: CirclePositionKey.self, value: [0: circleGeo.frame(in: .local).center])
    })

3. 正确生成有序的位置数组

在onPreferenceChange中按索引提取位置，确保顺序和圆形的布局一致：

.onPreferenceChange(CirclePositionKey.self) { positionsDict in
    if positionsDict.count == 4 {
        circlePositions = (0...3).compactMap { positionsDict[$0] }
        showPath.toggle()
    }
}

最终效果 #

修改后，路径会准确连接对应圆形的圆心，不会再出现偏移问题。

内容的提问来源于stack exchange，提问作者Jeevan Daniel Mahtani