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()
}

輸出