Here , I'm trying to apply same rotation in both these elements.But these object or elements are doing un wanted behaviour, they are not rotating as same as others . So I want to rotate them all as same , So that no the blue card gets behind the image. I mean I want them all to be in same rotation.
Here my code -
var body: some View {
VStack(spacing : 10){
ZStack {
ZStack (alignment : .bottom){
ZStack(alignment : .bottom){
Image("cat")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: length, height: length)
Text("<>")
.frame(width: 20, height: 20)
.padding()
.background(Color.orange)
.cornerRadius(15)
}
.frame(width: length, height: length)
.background(.blue)
.rotationEffect(Angle(degrees: Double(-totalRotation.width)))
Text("<>")
.frame(width: 20, height: 20)
.padding()
.background(Color.orange)
.cornerRadius(15)
.gesture(
DragGesture()
.onChanged { value in
totalRotation.width = value.translation.width + currentRotation.width
}
.onEnded { value in
currentRotation = totalRotation
mainAngle = totalRotation
}
)
Text("\(mainAngle.width) --- \(totalRotation.width)")
.foregroundColor(.white)
}
.frame(width: length, height: length)
.background(.blue)
.rotationEffect(Angle(degrees: Double(-mainAngle.width)))
}
.frame(width: length, height: length)
.rotationEffect(Angle(degrees: Double(-mainAngle.width)))
}
.frame(width: length, height: length)
Text("\(angle)")
}
}[![Here the image to get much information][1]][1]