I have a rectangle, that I need to rotate about itself, by dragging the icon in the top right corner. Now I have 2 versions of code, both of this doesn't work almost as it should, and I can't figure out what's wrong with second version. The question is, how I should change code to make a rectangle rotate with an icon on it?
struct rotateTest: View {
@State var angle: Angle = .zero
@State var recSize: CGSize = CGSize(width: 150, height: 80)
var body: some View {
Rectangle()
.foregroundColor(.blue)
.frame(width: recSize.width, height: recSize.height)
// .rotationEffect(angle) //v1 if rotation effect applyed here, rectangle rotate as it should, but rotation icon dont move with it (pic. 1)
.overlay(
Image(systemName: "arrow.counterclockwise.circle.fill")
.offset(x: recSize.width / 2, y: -recSize.height / 2)
.gesture(DragGesture()
.onChanged{ value in
angle = calcRotationAngle(value.translation)
})
)
.rotationEffect(angle) //v2 if rotation effect applyed here, icon move with rectangle, but rotation become unpredictable (pic. 2)
}
func calcRotationAngle(_ translation: CGSize) -> Angle {
Angle(radians: Double(
atan2(translation.height - recSize.height / 2,
translation.width + recSize.width / 2 )))
}
}
pic. 1:
pic. 2:
