SwiftUI 圆位置 x 和 y

我无法找到正确的方法来找到要放置的 x 和 y 坐标并将 Image 放在 overlay 中到我正在制作的进度视图的正确位置。我希望最终结果看起来像屏幕截图,只是不确定我会使用什么公式。至少可以说,我的数学技能很差。

GeometryReader { geometry in
    ZStack {
        Circle()
            .trim(from: 0.0,to: 0.5)
            .stroke(Color.blue,style: StrokeStyle(lineWidth: 5))
            .rotationEffect(.degrees(-180))
            .frame(width: geometry.size.width)
            .opacity(0.5)
            .overlay(Circle()
                        .trim(from: 0.0,to: CGFloat(configuration.fractionCompleted ?? 0) / 2)
                        .stroke(Color.blue,style: StrokeStyle(lineWidth: 5))
                        .rotationEffect(.degrees(-180))
                        .frame(width: geometry.size.width).overlay(
                            Circle()
                                .frame(width: 20,height: 20)
                                .position(x: 0,y: 0)
    }
}

SwiftUI 圆位置 x 和 y

Venus0808 回答:SwiftUI 圆位置 x 和 y

这里你只需要非常基本的几何图形 enter image description here 您需要获得 C 点坐标。在这张图片之后,它将是 (x,height / 2 - y)

要获得 y,您需要知道 sin α = CD/CA,因为 ACD 是直角三角形。从哪里y = r * sin α

对于 x,我们看一下同一个三角形,但取 cos:cos α = AD/CA,cos α = (r-x)/r => x = r - r * cos α = r * (1 - cos α)

您需要的最后一件事是 α,它非常简单:如果 Pi,则半圆的最后一个点,因此您只需要将其乘以进度即可。

struct ContentView: View {
    @State
    var progress: CGFloat = 0
    
    var body: some View {
        GeometryReader { geometry in
            let diameter = geometry.size.width
            let radius = diameter / 2
            let angle = progress * .pi
            ZStack {
                Circle()
                    .trim(from: 0.0,to: 0.5)
                    .stroke(Color.blue,style: StrokeStyle(lineWidth: 5))
                    .rotationEffect(.degrees(-180))
                    .frame(width: diameter)
                    .opacity(0.5)
                    .overlay(
                        Circle()
                            .trim(from: 0.0,to: progress / 2)
                            .stroke(Color.blue,style: StrokeStyle(lineWidth: 5))
                            .rotationEffect(.degrees(-180))
                            .frame(width: diameter)
                            .overlay(
                                Circle()
                                    .frame(width: 20,height: 20)
                                    .position(
                                        x: radius * (1 - cos(angle)),y: geometry.size.height / 2 - radius * sin(angle)
                                    )
                            )
                    )
            }
        }.onAppear {
            Timer.scheduledTimer(withTimeInterval: 0.1,repeats: true) { timer in
                withAnimation {
                    progress += 0.04
                }
                if progress >= 1 {
                    timer.invalidate()
                }
            }
        }
    }
}

enter image description here

本文链接:https://www.f2er.com/3060.html

大家都在问