2024/2/5

【Swift UI/UIKit】UIImage(画像)を反転させる方法！

この記事からわかること

Swift/UIKitで画像を左右/上下に反転させる方法
UIImageやImage構造体の使い方
UIImage.Orientation型の種類
UIImage(cgImage: CGImage, scale: CGFloat, orientation: UIImage.Orientation)にupMirroredを指定する

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：15.0.1
iOS：17.1
Swift：5.9
macOS：Sonoma 14.1

Swiftで画像自体を反転させて表示する方法：UIImage

Swiftで画像自体を左右に反転させたい場合は一度CGImage型を取得してUIImage(cgImage: CGImage, scale: CGFloat, orientation: UIImage.Orientation)イニシャライザで引数orientationにupMirroredを指定するだけです。

let image = UIImage(systemName: "swift")

if let cgImage = image?.cgImage, let scale = image?.scale {
    // 画像を反転させてUIImageを構築
    let flipImage = UIImage(cgImage: cgImage, scale: scale, orientation: .upMirrored)
}

反転自体は問題なく実装できましたが、そのままUIImageViewで表示してみると画質が悪くなってしまったので、反転させた画像自体を用意するのが一番無難かもしれません。

UIImage.Orientation型の種類

公式リファレンス：UIImage.Orientation型

enum Orientation : Int, @unchecked Sendable {
  case up
  // 180 度回転(上下逆)
  case down
  // 反時計回りに 90 度回転
  case left
  // 時計回りに 90 度回転
  case right
  // 水平方向に反転
  case upMirrored
  // 垂直方向に反転
  case downMirrored
  // 時計回りに 90 度回転され、水平方向に反転
  case leftMirrored
  // 反時計回りに 90 度回転され、水平方向に反転
  case rightMirrored
}

Swift UIの場合

Swift UIの場合はImage構造体自体が画像単体を保持するオブジェクトではなく、ビューを保持するオブジェクトなのでrotation3DEffectを使用してビューごと反転させることで解決できます。

HStack {
    Image(systemName: "swift")
        .resizable()
        .scaledToFit()
        .frame(width: 200)
    
    Image(systemName: "swift")
        .resizable()
        .scaledToFit()
        .frame(width: 200)
        .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
        // 上下反転
        //.rotation3DEffect(.degrees(180), axis: (x: 1, y: 0, z: 0))
        // 左右/上下反転
        //.rotation3DEffect(.degrees(180), axis: (x: 0, y: 0, z: 1))
}