SwiftUI 与 addArc 一起旋转在某些情况下无法正常工作

SwiftUI rotate together with addArc doesn't work correctly in some cases

Swift5,iOS13

使用addArc绘制半圆,然后使用rotation3DEffect旋转。在 y 轴上它工作得很好,但在 x 轴上似乎坏了。我是不是做错了什么。

我让这段代码起作用了。但这是一个拼凑。

我想使用 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)
   }

不清楚为什么需要它MyArc2,因为它是一样的,但是下面的内容,通过简单的形状修复,就可以按预期工作(在我看来)。

测试 Xcode 11.4 / iOS 13.4

struct Globe2View: View {
    struct MyArc : Shape {
        func path(in rect: CGRect) -> Path {
            var p = Path()
            // used provided dynamic rect instead of hardcoded NSScreen
            p.addArc(center: CGPoint(x: rect.width/2, y:rect.height/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
                MyArc()
                    .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))
            }
        }
    }
}