addArc와 함께 SwiftUI 회전이 일부 경우 올바르게 작동하지 않습니다.

Swift 5, iOS 13

addArc를 사용하여 반원을 그린 다음 rotation3DEffect를 사용하여 회전합니다. y 축에서는 완벽하게 작동하지만 x 축에서는 깨진 것처럼 보입니다. 내가 여기서 뭔가 잘못하고 있니?

이 코드가 작동합니다. 그러나 그것은 kludge입니다.

MyArc2의 x 축을 원하고 offset + rotationEffect를 사용할 필요가 없습니다. 첫 번째 이미지는이 코드에서있는 그대로입니다.

그러나 x 축을 사용하면 올바르게 그려지지 않습니다.

import SwiftUI

struct ContentView: View {
  @State var turn:Double = 0
  var body: some View {
    return VStack {
    Image(systemName: "circle")
      .foregroundColor(Color.blue)
      .onTapGesture {
        withAnimation(.linear(duration: 36)) {
          self.turn = 360
       }
     }
     Globe2View(turn: $turn)
    } // VStack
  }
 }

 struct Globe2View: View {
  struct MyArc : Shape {
    func path(in rect: CGRect) -> Path {
    var p = Path()
    p.addArc(center: CGPoint(x: UIScreen.screenWidth/2, y:UIScreen.screenHeight/2), radius: 64, startAngle: .degrees(90), endAngle: .degrees(270), clockwise: true)
    return p
}
}
   struct MyArc2 : Shape {
   func path(in rect: CGRect) -> Path {
    var p = Path()
    p.addArc(center: CGPoint(x: UIScreen.screenWidth/2, y:UIScreen.screenHeight/2), radius: 64, startAngle: .degrees(90), endAngle: .degrees(270), clockwise: true)
  return p
  }
  }
  @Binding var turn:Double
  var body: some View {
    ZStack {
     ForEach(0..<12) { loop in
      MyArc()
        .stroke(Color.blue, lineWidth: 2)
        .rotation3DEffect(.degrees(self.turn + Double((loop * 30))), axis: (x: 0, y: -1, z: 0), anchor: UnitPoint.center, anchorZ: 0, perspective: 0)
  }
      ForEach(0..<12) { loop in
       MyArc2()
         .stroke(Color.green, lineWidth: 2)
        .rotation3DEffect(.degrees(self.turn + Double((loop * 30))), axis: (x: 0, y: -1, z: 0), anchor: UnitPoint.center, anchorZ: 0, perspective: 0)
        .rotationEffect(.degrees(90))
        .offset(x: 20, y: 20)
    }
  }
 }
}

마지막 몇 줄을 이렇게 변경하면 ...

struct MyArc2 : Shape {
func path(in rect: CGRect) -> Path {
    var p = Path()
    p.addArc(center: CGPoint(x: UIScreen.screenWidth/2, y:UIScreen.screenHeight/2), radius: 64, startAngle: .degrees(0), endAngle: .degrees(180), clockwise: true)
  return p
}
}

 ForEach(0..<12) { loop in
    MyArc2()
      .stroke(Color.green, lineWidth: 2)
      .rotation3DEffect(.degrees(self.turn + Double((loop * 30))), axis: (x: 1, y: 0, z: 0), anchor: UnitPoint.center, anchorZ: 0, perspective: 0)
//          .rotationEffect(.degrees(90))
//          .offset(x: 20, y: 20)
   }