[SwiftUI] RotationGesture 画像を回転させる

画像を指で回転させるにはRotationGestureを使います。UIKitであればUIRotationGestureRecognizer に相当します。
これは画像を回転させることだけでなく、ハンドルを回転させて何かをコントロールしたり、ボリュームの値にするようなことも可能です。

Xcode 13.4.1

RotationGesture

　
Rectangle()の縦横200の四角い図形を作成して、それを中心から回転させてみましょう

RectangleにGestureからRotationGesture()を設定し、変化があった時に角度を変えるようにします。

@State var angle = Angle(degrees: 0.0)

var body: some View {
    Rectangle()
        .frame(width:200, height:200, alignment:.center)
        .rotationEffect(self.angle)
        .gesture(
            RotationGesture()
                .onChanged{angle in self.angle = angle}
        )
}

@State var angle = Angle(degrees: 0.0)

var body: some View {

Rectangle()

.frame(width:200, height:200, alignment:.center)

.rotationEffect(self.angle)

.gesture(

RotationGesture()

.onChanged{angle in self.angle = angle}

)

}

　
ほぼこれで出来上がっています。

rotationEffect：特定のポイントを中心にした回転角でViewを回転させます。

func rotationEffect(_ angle: Angle, 
    anchor: UnitPoint = .center) 
    -> some View

func rotationEffect(_ angle: Angle,

anchor: UnitPoint = .center)

-> some View

例として画像を回転させてみます。

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State var angle = Angle(degrees: 0.0)
            
    var rotation: some Gesture {
        RotationGesture()
            .onChanged { angle in
                self.angle = angle
        }
    }
            
    var body: some View {
        VStack{
            Image("sample")
            .resizable()
                .frame(width: 300, height: 375,
                       alignment: .center)
                .rotationEffect(self.angle)
                .gesture(rotation)

            Text("angle: \(Int(self.angle.degrees)) degree")
        }
    }
}

import SwiftUI

struct ContentView: View {

@State var angle = Angle(degrees: 0.0)

var rotation: some Gesture {

RotationGesture()

.onChanged { angle in

self.angle = angle

}

var body: some View {

VStack{

Image("sample")

.resizable()

.frame(width: 300, height: 375,

alignment: .center)

.rotationEffect(self.angle)

.gesture(rotation)

Text("angle: \(Int(self.angle.degrees)) degree")

}

　
回転角度はangleからdegreesやradiansで取り出せます。
　
　

References:
RotationGesture – SwiftUI | Apple Developer Documentation
rotationEffect(_:anchor:) – Image | Apple Developer
Angle – SwiftUI | Apple Developer Documentation
Handling Rotation Gestures | Apple Developer Documentation