在 SwiftUI 中绘制 2 个点和它们之间的一条线

Question

Swift 5.5 iOS 15

在随机位置画 2 个点，注意它们的来源，然后尝试使用这些信息在它们之间画一条线。

都差不多了，结果还是错的？我做错了什么？

struct ContentView: View {
@State var cords:[CGPoint] = []
@State var showMe = false
var body: some View {
    ZStack {
        ForEach((0..<2), id:\.self) {foo in
            Circle()
                .fill(Color.blue)
                .frame(width: 64, height: 64)
            
                .background(GeometryReader { geo in
                    Circle()
                        .stroke(Color.red, lineWidth: 2)
                        .frame(width: 64, height: 64)
                        .onAppear {
                            cords.append(CGPoint(x: geo.frame(in: .global).origin.x, y: geo.frame(in: .global).origin.y))
                        }
                })
                .position(returnRandom())
                .task {
                    if cords.count > 1 {
                        print("cords \(cords)")
                        showMe = true
                    }
                }
        }
    }
    ZStack {
        if showMe {
            Connected(cords: $cords)
                .stroke(Color.black, lineWidth: 1)
        }
    }
}
func returnRandom() -> CGPoint {
    let x = Double.random(in: 0..<width)
    let y = Double.random(in: 0..<height)
    return CGPoint(x: x, y: y)
}
}

struct Connected: Shape {
@Binding var cords:[CGPoint]
func path(in rect: CGRect) -> Path {
    var path = Path()
    path.move(to: cords[0])
    path.addLine(to: cords[1])
    return path
}
}

也尝试过...

cords.append(CGPoint(x: geo.frame(in: .global).midX, y: geo.frame(in: .global).midY))

Answer 1

问题是您实现它的方式。

你正在修改你的状态，圆圈已经出现并且坐标已经计算出来了。

.task {
    if cords.count > 1 {
        print("cords \(cords)")
        showMe = true
    }
}

所以您的视图会被重新评估，您的圆圈会在新位置重新绘制，而无需调用 onAppear()。您的线仍使用旧坐标系绘制。

在以下位置设置断点：

let x = Double.random(in: 0..<width)

你会看到它被击中了 4 次。

更好：

在坐标视图中创建一个空数组。将 ForEach 包装在条件中。在包含您的圈子的视图上设置一个 onApear 修饰符。计算您的坐标并附加它们。画出你的线条。

或者：

创建一个初始化程序来计算积分。或者用随机坐标初始化数组。

在 SwiftUI 中绘制 2 个点和它们之间的一条线

Drawing 2 dots and a line between them in SwiftUI

drawing

swift

swiftui

geometryreader