파이차트그리기(1) + UIBezierPath + 도형그리기

안녕하세요.

KataRN입니다.

 

오늘은 선긋는 방법부터 최종적으로 원그래프(파이차트)까지 그려보려고 합니다.

원그래프는 보통 수량을 한눈에 보기위해 원을 이용해서 사용하며 도넛모양으로 생겼다고 하여 파이차트라고 부르나봅니다.

평소에 라이브러리갖다 쓰고 그랬는데 굳이 써야되나라는 생각이들어 직접 그려봤습니다.

 

혹시라도 굳이 그릴필요있나 라이브러리 쓰면되지라고 생각하시면 Charts 라이브러리를 사용하시기 바랍니다.

https://github.com/danielgindi/Charts

 

아래 글은 라이브러리 'Charts'를 이용하여 그리는 방법을 다룬 글입니다.

https://katarnios.tistory.com/24

 

우선 선분긋기부터 도형그리기까지 해봅시다.

제일 쉽게 만드는 방법...

 

우선 그래프를 그리기 위해서는 UIBezierPath를 이용해야합니다.

사실 고민을 했던게 UIBezierPath를 다루는게 차라리 낫지 않을까 싶었으나..

사람들이 UIBezierPath보다 그래프 검색을 더 할거같아서.... 자본주의만세...

(UIBezierPath관련 글은 나중에 추가로 올리겠습니다..)

 

우선 UIBezierPath가 무엇인지 한번 알아보겠습니다.

아래 링크에 중학생도 알 수 있게 설명된 글이 있습니다.

꼭 아래글을 읽고 와주세요!(읽으셨다는 가정하에 이야기하겠습니다.)

https://blog.coderifleman.com/2016/12/30/bezier-curves/

 

베지에 곡선1

선분위의 점(녹색)들을 각각 이은 선분위의 점(검은색점)이 녹색 점들과 같이 움직일때 곡선을 그리죠?

베지에 곡선2

베지에 곡선 1이 여러개가 모여 베지에 곡선 2를 만들어냅니다.

이것을 응용하면 저희는 그림을 그릴 수 있게 됩니다!

저희가 그릴 그래프는 그저 단순한 동그란 원이기 때문에 어렵지 않습니다.

아무튼 이것이 베지에 곡선입니다.

 

우선 단계별로 진행해보겠습니다.

 

일단 선분을 그려봅시다.

 

우선 바로바로 설명드리기 위해서 기본 코드를 알려드릴게요.

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let view = testView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
        view.center = self.view.center
        view.backgroundColor = .gray
        self.view.addSubview(view)
    }
}

class testView: UIView {
    override func draw(_ rect: CGRect) {
   		//앞으로 여기에 코드를 추가합시다.
    }
}

 

이렇게 시작을 해보겠습니다. 가운데에 도화지를 만들어 놓고! 코드추가!

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

코드설명 해드릴게요.

 

우선 path.move로 (0,0) 위치에 점을 하나 찍었습니다.

두번째로 (0,0)에서 path.addLine로 (150,150) 위치를 향해 선을 그어줍니다.

여기까지만 하면 선이 안보입니다.

이후 path.stroke()를 해줘야 안보이는 선위에 선을 그려줍니다.

이걸로 저희는 그림을 그릴수 있게 되었습니다!

 

응용해서 선분 2개를 그어볼게요

        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: 150, y: 150))
        path.addLine(to: CGPoint(x: 100, y: 50))

 

바로 이어서 삼각형을 그려볼게요.

우선 점이 3개 나왔죠? 그럼 이어만 주면 되기 때문에 path.close만 추가해주면 됩니다.

        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: 150, y: 150))
        path.addLine(to: CGPoint(x: 100, y: 50))
        path.close()
        path.stroke()

네? 속빈강정이라고요?(뜬금따위 없다) 그럼 채웁시다.

        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: 150, y: 150))
        path.addLine(to: CGPoint(x: 100, y: 50))
        path.fill()
        path.stroke()

 

이제 저희는 삼각형을 그릴 수 있습니다.

 

다음은 원이겠죠?

        let path = UIBezierPath(roundedRect: CGRect(origin: CGPoint(x: 0, y: 0), size: CGSize(width: 300, height: 300)), cornerRadius: 150)
        UIColor.systemBlue.setFill()
        path.fill()
        path.stroke()

자 원을 그렸는데 우선 fill, setFill은 파란색으로 만들었다는걸 아실테니 그 윗줄에 대해 말씀드릴게요.

let path = UIBezierPath(roundedRect: CGRect(origin: CGPoint(x: 0, y: 0), size: CGSize(width: 300, height: 300)), cornerRadius: 150)

이건 (0,0)에서 (width: 300, height: 300) 사이즈의 사각형속에서 원을 꽉차게 그렸을때의 원이 그려집니다. 추가로 모서리 radious도 조정가능합니다.

꽉차게 그려서 상하좌우에 아웃라인이 지워지신게 보이시죠?

 

그럼 이번엔 무엇을 그려볼까요? 조각내야겠죠? 그래프하면 조각케이크처럼 만들어보죠

그전에 원래 학교에서 원의 넓이 구하기전에 원의 호의 길이 부터 배우는거 아시죠?

그래서 저희도 호부터 그립니다ㅎㅎ

 

위의 그림을 참고해보면 시작은 3시방향입니다.

let path = UIBezierPath(arcCenter: CGPoint(x: rect.midX, y: rect.midY), radius: 75, startAngle: (45 * .pi) / 180, endAngle: (135 * .pi) / 180, clockwise: true)

 

코드 설명 들어갑니다~

우선 시작이 arcCenter죠? 여기서 가운데 좌표를 설정해주고 시작각도와 끝나는 각도를 설정해주면 호가 그려집니다.

뒤의 clockwise는 안그려진 부분을 보여주고 그려진부분을 지워줍니다.

실제로 false로 바꿔준다면 어떻게 되는지 보도록하죠.

자 이제 홀케이크를 한조각 잘라봅시다!

어레레???

제가 생각한건 가운데에서 자르는건데... 

 

아 내일 이어서 써야겠네요.. 왜 이럴까...(자연스러웠다.)

 

오늘도 긴글 읽어 주셔서 감사합니다.

2편에서 봬요.(2편 링크 : https://katarnios.tistory.com/20)

 

 

파이차트그리기(2) + UIBezierPath + 시간표그리기

 

 

이글은 Zedd님의 글을 보고 99% 참고하였습니다. (솔직히 Zedd님 글이 더 잘되어있습니다.)

-> 링크 : https://zeddios.tistory.com/823

iOS ) UIBezierPath (4) - Pie chart