I am creating a watchOS app and using a red arrow svg to track something moving around. The problem I am running into is the point part (the top edge of the svg) needs to always points outwards from the middle circle view. I can’t get it to do that. Here is what it looks like and the code.
https://streamable.com/6nvoyh
import SwiftUI
struct ContentView: View {
@State private var sexOffenderCount: Int = 0
@State private var sexOffenderNames: [String] = []
// State for circular motion
@State private var angle: Double = 0
var body: some View {
GeometryReader { geometry in
VStack {
ZStack {
Circle()
.fill(.white)
.frame(width: 90, height: 90)
.border(.red)
Image("RedArrow")
.resizable()
.frame(width: 40.0, height: 40.0)
.position(
x: geometry.size.width / 9,
y: geometry.size.height / 9
)
.rotationEffect(Angle(degrees: angle * 180 / .pi + 80), anchor: .center)
.border(.blue)
VStack {
Text("2")
.background(.white)
.foregroundStyle(.black)
Text("Meters")
.background(.white)
.foregroundStyle(.black)
}
.font(.system(size: 20))
}
}
.padding()
.onAppear {
// Start circular motion
withAnimation(
.linear(duration: 5)
.repeatForever(autoreverses: false)
) {
angle = .pi * 2
}
}
}
}
}
#Preview {
ContentView()
}