2)UIBezierPath - 직선 연결(그리기)

전편 직선 연결(그리기 전) 참고해주세요!!

전편에 이어서 이번엔 직접 그리는 것을 해보겠습니다.

커스텀 뷰에 그릴 수 있는 것 이라고 합니다 라는 의미는 View에 draw()를 써서 하라는 뜻이라고 생각 하시면 될거 같습니다(틀렸다면 말해주세요~)

let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y:0))
path.addLine(to: CGPoint(x: 100, y: 100)
path.close()
path.stroke()

우리가 그려봤던 (0,0)에서 (100,100)까지 직선 하나를 보여주도록 하겠습니다.

class pathLine: UIView {
    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: 100, y: 100))
        path.close()
        path.stroke()
    }
}

자 위에 처럼 새로운 pathLine이라는 UIView를 만들고 draw() 메소드로 그림을 그려줬습니다
draw(_:)는 UIView 위에 그림을 그리는 거라고 생각하면 편합니다

이제 커스텀 뷰도 만들었겠다
실제로 화면에서 확인할 수 있게 해줍시다

...
    override func viewDidLoad() {
        super.viewDidLoad()

        let pathLine = pathLine(frame: self.view.frame)
        pathLine.backgroundColor = .clear
        self.view.addSubview(pathLine)
    }
...

위에 viewDidLoad(){ }안에 pathLine.frame을 현재 view.frame과 동일하게 만들고, 커스텀 뷰에 배경을 .clear(blue...)설정하고
현재 뷰를 재정의 해줍니다(addSubview() 메소드는 현재 view를 지우고 다시 pathLine으로 채운다 라고 생각하면 될거 같습니다)

이렇게 하면 끝!! 이제 확인해봅시다

생각대로 나왔군요 ㅎㅎ

자 다음은 새로운 점을 추가하여 연결해봅시다!!

class pathLine: UIView {
    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: 100, y: 100))
        path.addLine(to: CGPoint(x: 100, y: 200))
        path.close()
        path.stroke()
    }
}

(200,200)을 추가 했습니다
이렇게 되면 (0,0) , (100,100), (100,200)을 모조리 이어주는 삼각형 모양이 나올겁니다
이유는? close() 메소드 때문에 입니다
close()메소드는 처음에 찍었던 점부터 마지막에 찍은점까지 다 이어주는 역할을 합니다
확인해볼까요?

확인결과는 역시 close()메소드 때문에 삼각형이 보여집니다
이번엔 close()메소드를 제거하고 실행해보겠습니다

확인결과는 역시 직선만 보여지는 형태로 됩니다 ㅎㅎ

다음번에는 속성에 관련하여 알아보도록 하겠습니다~

+
속성 편