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)
         
         // Rotated image
         Text("Rotated Image:").font(.title2).padding(50)
         Image("wallpaper")
            .resizable()
            .frame(width: 250, height: 140)
            .rotationEffect(.degrees(40))         
      }      
   }
}

#Preview {
   ContentView()
}

输出

SwiftUI 中的 rotation3DEffect() 修饰符

在 SwiftUI 中，rotation3DEffect() 修饰符用于围绕给定轴或点在三维（即 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

参数

它接受以下参数：

• angle：表示我们要旋转图像的角度。

• axis：表示旋转轴。它包含一个元组，其中包含所有三个轴（X、Y 和 Z）的值。

• anchor：表示在其中执行旋转的二维点。默认值为中心。

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

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

示例

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

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)
         
         // Rotated image
         Text("Rotated Image:").font(.title2)
         Image("wallpaper")
            .resizable()
            .frame(width: 250, height: 140)
            .rotation3DEffect(
               .degrees(50),
               axis: (x: 1, y:0, z:0)
            )
         // Rotated image
         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()
}

输出