SwiftUI - 旋转图像

旋转图像是根据给定角度围绕中心点或轴旋转图像的过程。该角度可以用度或弧度来衡量。在 SwiftUI 中，我们可以借助以下预定义的修饰符轻松旋转图像 −

• rotationEffect()

• rotation3DEffect()

SwiftUI 中的"rotationEffect()"修饰符

rotationEffect() 修饰符用于围绕给定点旋转图像。它是 SwiftUI 中的预定义修饰符，可以在二维中旋转图像。它仅围绕给定轴旋转视图的内容，而不会旋转视图的框架。

语法

以下是语法 −

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

参数

它采用以下参数 −

• angle:表示我们必须将图像旋转到的角度。

• anchor:表示我们要执行旋转的视图内的单位点。此参数的默认值为中心。

示例

以下 SwiftUI 程序用于旋转图像。在这里，我们将图像绕其原始轴旋转 40 度。

import SwiftUI
struct ContentView: View {
   var body: some View {
      VStack{
         Text("Original Image:").font(.title2)
         Image("wallpaper")
            .resizable()
            .frame(width: 250, height: 140)
            .padding(20)
         
         // 旋转图像
         Text("Rotated Image:").font(.title2).padding(50)
         Image("wallpaper")
            .resizable()
            .frame(width: 250, height: 140)
            .rotationEffect(.degrees(40))         
      }      
   }
}

#Preview {
   ContentView()
}

输出

SwiftUI 中的 rotation3DEffect() 修饰符

在 SwiftUI 中，rotation3DEffect() 修饰符用于围绕给定的轴或点在 3 维(即 X、Y 和 Z)中旋转图像。它通常在原始视图的平面中显示旋转的内容。

语法

以下是语法 −

func rotation3DEffect(
   _ angle: Angle,
   axis: (x: CGFloat, y: CGFloat, z: CGFloat),
   anchor: UnitPoint = .center,
   anchorZ: CGFloat = 0,
   perspective: CGFloat = 1
) -> some View

参数

它采用以下参数 −

• 角度:表示我们必须旋转图像的角度。

• 轴:表示旋转的轴。它包含一个元组，其中包含所有三个轴(X、Y 和 Z)的值。

• 锚点:表示我们执行旋转的二维点。默认值为 center。

• anchorZ:表示 Z 轴，默认值为 0。

• perspective:表示给定旋转的消失点，此参数的默认值为 1。

示例

以下 SwiftUI 程序用于在图像上应用 3D 旋转效果。这里我们围绕两个不同的轴将图像旋转 50 度:X 和 Y。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Text("Original Image:").font(.title2)
         Image("wallpaper")
            .resizable()
            .frame(width: 250, height: 140)
            .padding(20)
         
         // 旋转图像
         Text("Rotated Image:").font(.title2)
         Image("wallpaper")
            .resizable()
            .frame(width: 250, height: 140)
            .rotation3DEffect(
               .degrees(50),
               axis: (x: 1, y:0, z:0)
            )
         // 旋转图像
         Text("Rotated Image:").font(.title2)
         Image("wallpaper")
            .resizable()
            .frame(width: 250, height: 140)
            .rotation3DEffect(
               .degrees(50),
               axis: (x: 0, y:1, z:0)
            ).padding(10)         
      }      
   }
}

#Preview {
   ContentView()
}

输出