[iOS] UIImageView Orientation과 이미지를 회전하는 방법

https://developer.apple.com/documentation/uikit/uiimage/orientation

UIImage.Orientation | Apple Developer Documentation

 

이미지를 회전하고 크롭하는 기능을 구현하면서 orientation이라는 기능을 알게 되었다. orientation을 통해 이미지가 나타나는 시점에 회전 방향을 결정하여 화면에 나타난다.

 

 

내가 원하는 이미지를 불러와 orientation값을 찍어보았다.

print("[orientation] \(image.imageOrientation)")

 

0이라는 값이 출력되었는데, 해당 enum은 UIImage extension에서 확인할 수 있었다.

 

public enum Orientation : Int, @unchecked Sendable {
    case up = 0
    case down = 1
    case left = 2
    case right = 3
    case upMirrored = 4
    case downMirrored = 5
    case leftMirrored = 6
    case rightMirrored = 7
}

필요한 부분만 가져와서 보면 8가지 종류의 case가 Int rawValue를 가지고 있다. 

case명으로 짐작 가능하지만 mirrored는 조오오오금 헷갈릴 수 있으니 아래 공식문서를 참고해 정리해보았다.

 

 

1. up 

case up = 0

좌: 변환 / 우: 원본

원본 그대로 나타난다.

 

 

2. down

case down = 1

좌: 변환 / 우: 원본

원본이라고 인식한 방향에서 180도 회전하여 나타난다.

 

 

 

3. left

case left = 2

 

좌: 변환 / 우: 원본

원본이라고 인식한 방향에서 시계방향으로 90도 회전하여 나타난다.

 

 

4. right

case right = 3

좌: 변환 / 우: 원본

원본이라고 인식한 방향에서 시계 반대 방향으로 90도 회전하여 나타난다.

 

 

5. upMirrored

case upMirrored = 4

좌: 변환 / 우: 원본

원본이라고 인식한 방향에서 수평으로 좌우 반전되어 나타난다.

 

 

6. downMirrored

case downMirrored = 5

좌: 변환 / 우: 원본

원본이라고 인식한 방향에서 수직으로 상하 반전되어 나타난다.

 

7. leftMirrored

case leftMirrored = 6

좌: 변환 / 우: 원본

원본이라고 인식한 방향에서 시계 반대방향으로 90도 회전하고, 수평으로 좌우 반전되어 나타난다.

 

 

8. rightMirrored

case rightMirrored = 7

좌: 변환 / 우: 원본

원본이라고 인식한 방향에서 시계 방향으로 90도 회전하고, 수평으로 좌우 반전되어 나타난다.

 

 

 

이미지 회전을 하고 싶은 상황에 이 기능을 사용하면 내가 원하는 결과를 얻을 수 있을것 같아 다음과 같이 코드를 작성하였다.

image.imageOrientation = .down

작성하면 바로 알 수 있듯이 imageOrientation 프로퍼티는 get only이기에 값을 지정 할 수 없다.

우선 orientation만으로는 이미지 회전은 불가능하다. orientation을 통해 회전을 한다고 해도 이 값을 조정하는건 원본 이미지는 그대로 원본 방향으로 되어 있고, 이미지가 화면에 나타나는 시점에 orientation의 값을 통해 사진을 회전할 지 결정하기 때문이다.

이 문제를 해결하기 위해 고민하다가 다음 함수를 발견했다.

 

https://developer.apple.com/documentation/spatial/size3d/3943191-rotated

rotated(by:) | Apple Developer Documentation

image.transform = image.transform.rotated(by: .pi)

 

이런식으로 작성해주면 이미지가 돌아간다!

위 코드에서 .pi값을 주면 180도 돌아간다. :)