[iOS/UI] UIBezierPath의 거의 모든 것 (feat. 모양,곡선,직선 그리기)

안녕하세요 Foma 💻 입니다!

 

오늘은 원하는 모양을 직접 그릴 수 있는 UIBezierPath에 대해서 알아보려고 합니다.

 

예전부터 다루고 싶은 주제였는데 드디어 정리하게 되네요..!

 

바로 시작할게요~

---

UIBezierPath란?

 

UIBezierPath는 UIKit에서 그리기(Drawing)에 속해있는 클래스입니다.

 

그러므로 어떤 것을 그리기 위한 기능들이 속해있겠죠?

 

 

애플 공식 문서에는 아래와 같이 정의하고 있습니다.

 

A path that consists of straight and curved line segments that you can render in your custom views.

 

해석하면 view에서 렌더링 할 수 있는 직선과 곡선으로 구성된 경로라고 하네요.

---

Initializer

 

BezierPath를 맨 처음 초기화 하는 것 즉, BezierPath를 생성하는 법도 여러가지가 있는데요.

 

그리기 위한 UIView BezierView를 만들고 BezierViewController에서 모양을 확인하겠습니다.

 

BezierView

 

class BezierView: UIView {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func draw(_ rect: CGRect) {
	//이 곳에서 그리기가 진행됩니다.
    }
}

 

BezierViewController

 

class BezierViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let bezierView:BezierView = BezierView(frame:view.frame)
        bezierView.backgroundColor = .clear
        view.addSubview(bezierView)
    }
}

 

1. 사각형

 

가장 먼저 기본이 되는 사각형으로 경로를 생성하는 법에 대해 알아보겠습니다.

 

이 곳에서 UIBezierPath(rect:)로 사각형 경로를 그려보겠습니다.

 

 override func draw(_ rect: CGRect) {
        let path = UIBezierPath(rect: CGRect(x: bounds.midX-50, y:bounds.midY-50, width: 100, height: 100))
        UIColor.systemRed.setFill()
        UIColor.systemYellow.setStroke()
        path.lineWidth = 10
        path.stroke()
        path.fill()
    }

 

아래와 같이 사각형 모양이 그려진 것을 볼 수 있습니다.

 

 

2. 타원형

 

그 다음으로 타원형 경로를 그려보겠습니다.

 

UIBezierPath(ovalIn:)으로 타원형 경로를 생성해 줍니다.

 

(draw 부분의 나머지는 같으므로 생략하겠습니다.)

 

let path = UIBezierPath(ovalIn: CGRect(x: bounds.midX-50, y:bounds.midY-50, width: 100, height: 200))

 

아래와 같이 타원형 모양이 그려진 것을 볼 수 있습니다.

 

 

 

3. 둥근 사각형

 

다음으론 끝 모서리가 둥글게 라운딩 처리된 사각형을 생성해 보겠습니다.

 

UIBezierPath(roundedRect:,cornerRadius:)으로 Rect와 얼만큼 둥글게 할건지 cornerRadius를 지정해 주면 됩니다.

 

  let path = UIBezierPath(roundedRect: CGRect(x: bounds.midX-50, y:bounds.midY-50, width: 100, height: 200),cornerRadius: 20)

 

아래와 같이 모서리가 둥근 사각형을 볼 수 있습니다.

 

 

4. 특정 부분만 둥근 사각형

 

위에서는 모든 모서리가 둥근 사각형을 만들어야 했는데요.

 

UIBezierPath(roundedRect:,byRoundingCorners:,cornerRadii:)를 통해서 어느 부분을 어느 정도로 둥글게 할 건지 지정하고 생성할 수 있습니다.

 

        let path = UIBezierPath(roundedRect: CGRect(x: bounds.midX-50, y:bounds.midY-50, width: 100, height: 200),
                                byRoundingCorners: [UIRectCorner.topRight, UIRectCorner.topLeft],
                                cornerRadii:  CGSize(width: 20, height: 20))

 

 

5. 원의 호

 

시작 각도와 끝 각도를 이용하여 원의 호를 만들 수도 있습니다.

 

UIBezierPath(arcCenter:,radius:,startAngle:,endAngle:,clockwise:)를 이용하여 원의 중심과 반지름을 정해주고 시작 각도와 끝 각도를 정해주고 시계방향으로 그릴건지 여부를 지정해서 그릴 수 있습니다.

 

      let path = UIBezierPath(arcCenter:center,
                                radius: 50,
                                startAngle: 0,
                                endAngle: CGFloat.pi,
                                clockwise: true)

 

아래와 같이 수박 모양이 그려지게 됩니다.

 

---

Constructing a Path(경로 구성하기)

 

위와 같이 이미 주어진 생성자를 이용하여 모양을 그릴 수도 있지만 직접 원하는 모양을 하나 하나 그려서 표현할 수 있습니다.

 

크게는 직선을 추가하고, 곡선을 추가하는 방법이 있습니다.

 

1. 시작 지점 정하기

 

경로를 구성하기 위해선 가장 먼저 어느 지점에서 시작할 것인지를 정해줘야 하는데요.

 

move(to:)를 메서드를 이용해서 지정할 수 있습니다.

 

먼저 빈 UIBezierPath를 생성해준 뒤 UIView의 가운데를 시작점으로 지정해줍니다.

 

	let path = UIBezierPath()
	path.move(to: center)

 

2. 직선 추가하기

 

addLine(to:)에 도착 지점을 정해주면 특정 지점부터 원하는 지점까지 직선을 그릴 수 있습니다.

 

여기서 특정 지점은 가장 마지막에 구성된 경로의 끝부터 시작됩니다.

 

x축에 100만큼 이동한 직선을 그려주겠습니다.

 

        let path = UIBezierPath()
        path.move(to: center)
        path.addLine(to: CGPoint(x:center.x + 100, y: center.y))

아래와 같이 직선이 그려지게 됩니다.

 

 

3. 곡선 추가하기(3차 베지어 곡선)

 

addCurve(to:,controlPoint1,controlPoint2:) 으로 3차 베지어 곡선을 그릴 수 있습니다.

 

UIBezierPath 이름 자체가 베지어패스인만큼 이 메서드가 핵심이라고 생각되는데요.

 

* Bezier Curve는 프랑스의 자동차 제조사 르노사의 기술자인 피에르 베지에가 1962년 자동차 몸체 디자인에 사용하면서부터 널리 알려졌으며 controlPoint를 이용해서 아래와 같은 곡선을 의미합니다.

 

 

 

직선의 끝부터 아래로 된 S자형 곡선을 그려주겠습니다.

 

        path.move(to: center)
        path.addLine(to: CGPoint(x:center.x + 100, y: center.y))
        path.addCurve(to: CGPoint(x:center.x + 100, y: center.y+100),
                      controlPoint1: CGPoint(x:center.x + 50, y: center.y+25),
                      controlPoint2: CGPoint(x:center.x + 150, y: center.y+75))

 

아래와 같이 S자형 곡선이 그려진 것을 볼 수 있습니다.

 

 

4. 곡선 그리기(2차 베지어 곡선)

 

위에서 컨트롤 포인트가 2개인 3차 베지어 곡선을 그려주었다면 이번엔 컨트롤 포인트가 하나인 2차 베지어 곡선을 그려보겠습니다.

 

addQuadCurve(to:,controlPoint:)로 원하는 곳으로 둥글게 곡선을 그릴 수 있습니다.

 

S자 곡선의 왼쪽으로 위로 둥근 쿼드 곡선을 그려주겠습니다.

 

        path.move(to: center)
        path.addLine(to: CGPoint(x:center.x + 100, y: center.y))
        path.addCurve(to: CGPoint(x:center.x + 100, y: center.y+100),
                      controlPoint1: CGPoint(x:center.x + 50, y: center.y+25),
                      controlPoint2: CGPoint(x:center.x + 150, y: center.y+75))
        path.addQuadCurve(to: CGPoint(x:center.x, y: center.y+100),
                          controlPoint: CGPoint(x:center.x + 50, y: center.y+50))

 

아래와 같이 위로 둥근 2차 베지어 곡선이 그려진 것을 볼 수 있습니다.

 

5. 모양 완성

 

원하는 모양을 다 구성하였다면 다 그렸다고 코드로 알려줘야겠죠?

 

바로 close() 메서드를 사용하여 경로가 완성되었음을 알려줍니다.

 

        path.close()

 

6. 현재 위치

 

currentPoint 메서드를 사용하면 그려준 모양의 현재 위치가 어디인지 확인할 수 있습니다.

 

        print(path.currentPoint)//(195.0, 422.0)

---

Drawing Properties & Paths

 

위에서 원하는 모양을 어떤 색으로 채울지, 가장자리를 어떤 색으로, 얼만큼의 두께로 할건지를 정했습니다.

 

이 외에도 선의 모양, 부드러움 정도 등을 정할 수 있습니다.

 

1. 선 그리기

 

먼저 선을 그릴지를 결정해야 하는데요.

 

stroke 메서드를 사용해서 가장자리를 그릴 수 있습니다.

 

        path.stroke()

 

2. 선의 두께

 

선의 두께는 위에서 다뤘다시피 lineWidth로 정할 수 있습니다.

 

        path.lineWidth = 10

 

3. 선 색깔 정하기

 

원하는 색깔에 setStroke 메서드를 사용하면 원하는 색으로 선을 그릴 수 있습니다.

 

        UIColor.systemYellow.setStroke()

 

위 세개 매서드를 사용하면 아래와 같이 두께가 10이고 노랑색인 선이 그려지게 됩니다.

 

4. 선의 끝 둥글게 하기

 

lineCapStyle로 선의 끝의 모양을 정할 수 있는데요.

 

총 butt,round,square가 있습니다.

 

하지만 butt,square은 보통 선이 그려질 때처럼 각진 모양으로 표시되게 때문에 패스하겠습니다.

 

 

        path.lineCapStyle = .round

 

아래와 같이 선의 끝 점이 둥글게 됩니다. (주의할 점은 path.close() 전에 적용해야 합니다.)

 

 

위에서 만들어 준 모양에 적용하면 아래와 같이 끝과 시작만 둥글게 됩니다.

 

 

6. 모든 모서리 둥글게 하기

 

위에서 lineCapStyle이 시작과 끝 점만 둥글게 한다면 lineJointStyle은 모든 연결되 부분을 둥글게 하는 메서드입니다.

 

lineJointStyle은 총 miter,bevel,round 3개가 있습니다. (miter는 기본적으로 그려지는 선 스타일입니다.)

 

 

먼저 round는 아래와 같이 모든 부분이 둥글게 됩니다.

 

        path.lineJoinStyle = .round

 

 

bevel은 모서리를 부드럽게(?) 만들어 줍니다.

 

        path.lineJoinStyle = .bevel

 

7. 색 채우기

 

모양을 만들었다면 안을 원하는 색으로 채울 수 있는데요.

 

바로 fill 메서드를 사용하면 됩니다.

 

원하는 색.setFill()로 색을 지정해주고, fill() 메서드로 색을 채워줍니다.

 

        UIColor.systemBlue.setFill()
        path.fill()

 

 

fill(with:,alpha:) 파라미터로 블렌드 모드와 투명도를 결정할 수 있습니다.

 

        path.fill(with: CGBlendMode.darken, alpha: 0.5)

 

아래와 같이 전체적인 색의 투명도는 옅어지고, 겹친 부분은 진하게 됩니다.

 

8. 대쉬 스타일 선

 

선을 대쉬 스타일로 만들 수 있는데요.

 

setLineDash(pattern:,count:,phase:) 으로 대쉬 스타일을 정할 수 있는데요.

 

먼저 pattern은 짝수 번째는 대쉬의 길이, 홀 수번째는 여백을 의미합니다.

 

즉 [10,1,5,2] 는 10길이의 선과 1의 여백 5길이의 선과 2길이의 여백이 반복됩니다.

 

        path.setLineDash([10,1,5,2], count: 4, phase: 0)

 

 

그 다음 count는 pattern의 어디까지 적용할건지를 정하는 것인데요.

 

위에선 4로 적용했으므로 10,1,5,2가 적용됩니다.

 

하지만 2로 설정하면 10,1까지만 적용되기 때문에 아래와 같이 나타납니다.

 

        path.setLineDash([10,1,5,2], count: 4, phase: 0)

 

phase는 어느 지점부터 시작할 건지를 정하는 것입니다.

 

위 패턴으로 진행하면 10그리고 1 띄고 5 그리고 2 띄고 ... 반복이겠죠?

 

만약 phase를 4로 지정한다면 4부터 시작한다는 의미이므로 (10-4)6그리고 1 띄고 5 그리고 2띄고 10 그리고...가 반복되는 것입니다.

 

phase를 10으로 지정한다고 가정하면 (10-10)0 그리고 1띄고 5그리고 2띄고 10 그리고... 가 반복되게 됩니다.

 

        path.setLineDash([10,1,5,2], count: 4, phase: 10)

 

1 띄고 부터 시작이므로 시작 부분이 1 여백으로 시작되는 것을 볼 수 있습니다.

---

오늘은 그토록 정리하고 싶었던 UIBezierPath에 대해 알아 보았습니다.

 

완벽히 모든 것을 다룬 건 아니지만 그래도 한 80~90%는 정리했다고 생각이 들어서 뿌듯하네요...ㅎ

 

궁금하신 점이나 틀린 부분이 있다면 언제든 댓글로 알려주세요!