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))
}
}
}
}
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))
}
}
}
}