[iOS/UI] 특정 부분만 투명하게 만들기 (feat. fillRule, evenOdd)

안녕하세요 Foma 입니다!

오늘은 프로젝트 진행 중에 특정 부분만 투명하게 해서 그 부분만 보이게 하는 기능을 만드는 법에 대해 정리해 보려고 합니다.

 

바로 시작할게요~

---

Preview

 

---

Add a label

 

배경에 레이블을 하나 넣어 투명한지 아닌지 확인하기 쉽게 만들어 주겠습니다.

 

        let label = UILabel(frame: CGRect(x: view.center.x - 100, y: view.center.y - 100, width: 200, height: 200))
        label.backgroundColor = .systemBlue
        label.textColor = .white
        label.font = UIFont.boldSystemFont(ofSize: 20)
        label.text = "Fomagran"
        label.textAlignment = .center
        label.layer.cornerRadius = 100
        label.layer.masksToBounds = true
        view.addSubview(label)

 

아래와 같이 레이블이 추가될 거에요.

 

---

Add a backgroundView

 

반투명한 배경색이 될 backgroundView를 추가해 줍니다.

 

        let backgroundView = UIView(frame: view.frame)
        backgroundView.backgroundColor = .black.withAlphaComponent(0.6)
        view.addSubview(backgroundView)

 

아래와 같이 반투명한 뷰가 레이블 위를 덮겠죠?

 

---

Set a maskLayer's path

 

위에서 만든 backgroundView의 mask가 될 CAShapeLayer를 만들어 줄거에요.

 

        let maskLayer = CAShapeLayer()

 

위 레이어를 만든 이유는 직접 UIBezierPath를 그려 지정할 수 있기 때문이에요.

 

총 2개의 Path를 그려줄건데요.

 

하나는 backgroundView와 같은 크기와 위치에 있는 backgroundPath를 만들어 주고,

 

        let backgroundPath = UIBezierPath(rect: view.frame)

 

하나는 투명한 부분의 모양이 될 transparentPath를 그려줄거에요.

 

(혹시 EasierPath를 모르시는 분들은 여기 에서 확인해 주세요!)

 

        let transparentPath = EasierPath(view.center.x-50,view.center.y-100)
        transparentPath.right(100)
        transparentPath.down(200)
        transparentPath.left(100)
        transparentPath.up(200)

 

backgroundPath에 transparentPath를 추가해 주고, maskLayer의 path를 backgroundPath로 지정해 줍니다.

 

        backgroundPath.append(transparentPath.path)
        maskLayer.path = backgroundPath.cgPath

 

그리고 backgroundView의 레이어의 mask를 maskLayer로 덮어주세요.

 

        backgroundView.layer.mask = maskLayer

 

그리고 실행시켜 보면? 아무 일도 일어나지 않습니다.

 

왜냐하면 backgroundPath에 transparenthPath가 겹쳐져 있기 때문이에요.

 

---

Set a fillRule to evenOdd

 

위에서 backgroundPath와 transparentPath가 겹쳐져 있다고 했죠?

 

특정 경로가 겹쳐지는 곳을 제외하고 색이 채워질 수 있게 할 수 있는데요.

 

바로 fillRule을 .evenOdd로 해주는 것입니다.

 

        maskLayer.path = backgroundPath.cgPath
        maskLayer.fillRule = .evenOdd
        backgroundView.layer.mask = maskLayer

 

그리고 실행해 보면 우리가 원하는 모양만 투명하게 됩니다.

 

---

What is a evenOdd?

 

그렇다면 fillRule에 evenOdd는 무엇일까요?

 

공식 문서엔 evenOdd를 아래와 같이 설명하고 있어요.

 

 

간단하게 해석하면 겹치는 부분의 총 수를 세고, 만약 그 수가 짝수이면 외부를 의미합니다.

 

그리고 만약 총 수가 홀수이면 내부를 뜻하며 해당 영역을 채워야 하는 것인데요.

 

이렇게 말하니 좀 이해가 힘드실 것 같아 쉽게 설명드리면 아래와 같이 A,B가 있고 각 지점마다 겹친 부분(1)을 나타냅니다.

 

만약 두 A,B 구간이 겹친다면 아래와 같이 겹친 부분이 2가 되고 해당 부분은 짝수가 됩니다.

 

고로 짝수가 된 부분은 외부 영역으로 의미하여 채우지 않아도 되는 규칙을 뜻하는 것 입니다.

 

---

오늘은 이렇게 CAShapeLayer의 채우기 규칙(fillRule)의 oddEven을 이용하여 원하는 부분만 투명하게 만드는 법에 대해서 알아 보았습니다.

 

혹시라도 궁금하신 점이나 틀린 점이 있다면 댓글로 알려주세요!