이미지 마스킹하기 - UIImage Mask

디자이너님이 요구하시는 사항은 다음과 같다. 

이렇게 울퉁불퉁한 테두리 안에 이미지를 넣는 것.

 

그동안 이미지 테두리 처리는 cornerRadius 같은 거로밖에 안 해봤는데,

저건 대체 어떻게 커스텀 해야할 지 감이 안 잡혔다.

 

답답해서 안드 개발자분한테 문의드려봤더니, 

며칠 뒤에 mask image라는 키워드를 알려주셨다. 

사실 그 키워드로 찾아봐도 11년 전 자료... 12년 전 자료 밖에 안 떠서 곤란했었는데,

비교적 최근 (5년 전) 링크를 찾고 적용 가능하게 되었다. 휴~

 

일단 기본 이미지 코드:

let tempImage = UIImageView().then{
    $0.layer.masksToBounds = true
    $0.backgroundColor = .systemPurple
    $0.contentMode = .scaleAspectFit
}

 

테두리?를 가진 마스크뷰 정의:

(svg로도 가능)

let maskView = UIImageView()
maskView.image = UIImage(named: "Vector2")	//테두리 이미지
tempImage.mask = maskView

 

함수 오버라이딩:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    maskView.frame = tempImage.bounds
}

 

잘 된다. 이렇게 하나 배워간다. ~

화질이 좀 깨지는데 이 부분은 수정가능할 듯

 

 

참고링크: https://stackoverflow.com/questions/40189692/what-do-i-need-for-masking-a-uiimageview-and-how-do-i-do-it-in-swift-3

What do I need for masking a UIImageView and how do I do it in Swift 3?