[iOS - SwiftUI] 프로필 이미지 설정 페이지

1. 프로필 이미지 설정 페이지를 만들어보자

• 예시 이미지는 내 PFP NFT(ETH Network - Chaos City: Residents)를 사용했다.

2. 방법

1. 이미지를 2개 사용

   1. 해당 이미지를 2개 사용하는 방법

      1. 원본 / 결과

         

         원본

         

         결과

   2. 코드

       import SwiftUI
      
       struct asdfav: View {
           var body: some View {
               ZStack {
                   VStack {
                       Image("carki")
                           .resizable()
                           .scaledToFit()
                           .overlay(
                               Rectangle()
                                   .foregroundColor(Color.black.opacity(0.4))
                                   .overlay(
                                       Image("carki")
                                           .resizable()
                                           .scaledToFit()
                                           .mask {
                                               Circle()
                                           }
                                   )
                           )
                   }
               }
           }
       }

      • 뷰에서 탈출 클로저의 죽음의 피라미드를 볼 수 있다.
      • 비슷한 구조로 디자이너분께 흐림 처리된 배경 이미지 1개(가운데 원 만큼 뚫린 이미지)와 원형의 이미지 1개를 받아서 2개를 겹치는 방법도 있긴 하지만 코드적으로 똑같을 거라 생각했음.
      • 같은 이미지를 2개 사용하는 것에 대한 낭비 및 코드 복잡도 등이 코드 개선의 원인이 됐다.

   3. 문제 해결

      1. 해당 문제를 해결하기 위해서 구글링의 결과로 Canvas를 찾게 됨

         1. Canvas는 SwiftUI View에 동적인 2D 그래픽을 그리는 기능을 한다.

            

      2. Canvas를 이용해 원본 이미지 위(overlay)에 Canvas로 흐림처리된 사각형을 그리고 그 사각형에서 원의 크기만큼의 영역을 지우는 방식을 사용해보기로 함

      3. 코드

          var body: some View {
                  ZStack {
                      Image("carki")
                          .resizable()
                          .scaledToFit()
                          .overlay(
                              ZStack {
                                  Canvas { context, size in
                                      // Path
                                      let backgroundPath = Path(roundedRect: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height / 2), cornerSize: CGSize.zero)
                                      context.fill(backgroundPath, with: .color(.black.opacity(0.4)))
                                  }
                                  Circle()
                                    .blendMode(.destinationOut)
                              }.compositingGroup()
                          )
                  }

         • blendMode(.destinationOut)은 덮인 배경을 지우는 데 사용하는 모드이다.
         • compositingGroup()을 통해 부모뷰와 통합하여 적용한다(Canvas + Circle)