Day by day iPhone Programming 2010. by Young Oh Jeong 열네번째날. 화면에 직접 그려서 표현하기 (TestApp08) 오늘은 화면에 직접 그리는 것 중, 어제의 직선과 사각형에 이어서 원과 호를 그리는 연습을 계속해서 해 보겠습니다. 이것을 통해서 파이그래프를 그려보고, 여기에 이미지와 글자등을 넣는 공부까지 해 보겠습 니다. 파이 그래프 (원, 호 그리기 연습) 수학에서 이야기하는 도형중에는 원(圓, 둥글 원)이 있고, 호(弧, 활 호)가 있습니다. 어떤 의미에서 호들 이 모여서 원을 이룬다고 할 수도 있습니다만, 개발자에게는 원이 먼저입니다. 프로그램 코딩에 있어서 는 원이 더 그리기 간단하고, 원에서 호를 파생시켜 만들기 때문이지요. 우선 원을 그리는 법을 알아봅시다. 원을 그릴 때도, 늘 우리가 그리기를 할 때 했던 과정은 모두 거쳐야 합니다. 1단계. 위 코드라인으로 context를 만들어 두어야 하고, 2단계. 위와 같이 그리는 선의 색이나 안쪽에 칠할 색을 지정해 주어야 합니다. 3단계. 처음 그래픽스 프로그래밍을 접하시는 분들은 ‘아니!! 원을 그리는데, 갑작스럽게 사각형을 그릴때나 사 용할 CGRect를 생성하나?’ 하는 의문을 갖으실 수도 있습니다. 아래 그림을 보시면 이해가 쉬워지는데요. CGRect로 사각형 영역을 지정하고 그 사 각형 영역에 내접하는 원을 그리는 방식입니다. CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetStrokeColorWithColor(context,[UIColor redColor].CGColor); or CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor); CGRect rectangle = CGRectMake(60,170,200,200);
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Day by day iPhone Programming 2010. by Young Oh Jeong
열네번째날. 화면에 직접 그려서 표현하기 (TestApp08)
오늘은 화면에 직접 그리는 것 중, 어제의 직선과 사각형에 이어서 원과 호를 그리는 연습을 계속해서 해보겠습니다. 이것을 통해서 파이그래프를 그려보고, 여기에 이미지와 글자등을 넣는 공부까지 해 보겠습니다.
파이 그래프 (원, 호 그리기 연습)수학에서 이야기하는 도형중에는 원(圓, 둥글 원)이 있고, 호(弧, 활 호)가 있습니다. 어떤 의미에서 호들이 모여서 원을 이룬다고 할 수도 있습니다만, 개발자에게는 원이 먼저입니다. 프로그램 코딩에 있어서는 원이 더 그리기 간단하고, 원에서 호를 파생시켜 만들기 때문이지요.
우선 원을 그리는 법을 알아봅시다.
원을 그릴 때도, 늘 우리가 그리기를 할 때 했던 과정은 모두 거쳐야 합니다.
1단계.
위 코드라인으로 context를 만들어 두어야 하고,
2단계.
위와 같이 그리는 선의 색이나 안쪽에 칠할 색을 지정해 주어야 합니다.
3단계.
처음 그래픽스 프로그래밍을 접하시는 분들은 ‘아니!! 원을 그리는데, 갑작스럽게 사각형을 그릴때나 사용할 CGRect를 생성하나?’ 하는 의문을 갖으실 수도 있습니다.
아래 그림을 보시면 이해가 쉬워지는데요. CGRect로 사각형 영역을 지정하고 그 사각형 영역에 내접하는 원을 그리는 방식입니다.
Day by day iPhone Programming 2010. by Young Oh Jeong
...
다음 호 그리기를 해 봅시다.
호라는 것이 원을 그리다가 원하는 부분까지만 그리고 멈추는 형태입니다. 그렇다보니, 원에 필요한 요소가 다 필요하고, 거기에 또, 어디서 부터 어디까지만 그려야 한다는 정보까지 필요합니다. 따라서 호 그리기는 원 그리기 보다 좀 더 많은 값을 입력해야 합니다. 4단계에서 입력하는 값들에 대해 살펴볼 것 입니다..
호를 그리는 단계 중 처음은 다른 그리기와 같습니다.
1단계.
위 코드라인으로 context를 만들어 두어야 하고,
2단계.
위와 같이 그리는 선의 색이나 안쪽에 칠할 색을 지정해 주어야 합니다.
3단계.
이렇게 호를 그릴 중심점을 잡습니다.
4단계.
이제 좀 많은 값들이 입력되어야 하는데요. CGContextAddArc의 인자값이 7개나 됩니다.
CGContextAddArc(context, x, y, 100, radians(0), radians(240), 0);
Day by day iPhone Programming 2010. by Young Oh Jeong
�
그런데 40˚는 몇 라디안 일까? 50˚는?이렇게 잠시나마 radian 계산을 어떻게 할까? 하고 고민 하신분들도 안심하셔도 됩니다. 기본적으로 radian이라는 메써드를 만들어두면, 우리가 편안하게 사용하는 각도의 개념(90˚, 120˚와 같은 쉬운 개념)을 그대로 사용할 수 있습니다.
�라디안(radian) 계산공식은,
�입니다.
π는 3.14159265358979323846... 하고 계속 가는 무한소수 이지요. 사실 이렇게까지 정확하게 할 필요성은 없지만, 일단,
#define PI 3.14159265358979323846
이렇게 해서 파이(PI)값을 지정해 두고 라디안 구하는 공식에 대입연산하는 인라인 메써드를 만듭니다.
이 정도 공부를 하고 나니 이제 파이그래프를 그릴수 있을것 같습니다. 우리는 아래와 같은 그래프를 그릴 것입니다. 그래프의 개념을 이번 학기 성적을 내는 비율을 나타내는 것으로 하겠습니다. 출석점수가 30%, 과제점수가 30%, 그리고 시험점수가 40%의 비율로 학기성적이 결정난다면, 전체 원을 해당 점수비율에 맞추어 보여주어야 합니다.
아래 그림을 보면 호가 3개 있는 것을 알수 있습니다. 파란색 호, 초록색 호, 빨간색 호 3개만 그리면 파이그래프가 완성됩니다.
�문제는 radian 즉, 각도이겠지요. 그래프를 그리려면 시작지점, 여기서는 정확하게 시작 각도를 정해야 합니다. 시작각도는 위 그림에서 파란색과 초록색이 만나는 그 지점을 기준으로 시작점을 잡겠습니다.
문 : 파란색과 초록색이 만나는 그 지점은 몇도일까요? 답 : 시계방향으로 하면 270˚, 반시계방향으로 하면 90˚ 입니다.
중심점
전체(360˚)의 40%
전체 (360˚) 의 30%
전체 (360˚) 의 30%
Day by day iPhone Programming 2010. by Young Oh Jeong
그렇다면 그 다음 정해야 할것은 시계방향으로 할것인지 반시계방향으로 할 것인지 이겠네요. 흠... 시계방향으로 합시다. 자 이제 시작지점 각도가 270˚로 정해 졌습니다.
그럼 이제 초록색 호 부터 시계방향으로 그려나가면 되겠습니다. 이전에 그린 호의 끝 각이 다음에 그릴 호의 시작각이 되도록 하면, 연속적으로 이어지는 파이그래프를 그릴수가 있습니다.
비교해 봅시다 CGPoint : 한 점의 위치정보를 담을 수 있는 객체. 주로 점(x,y)라는 픽셀좌표 정보. CGSize : 특정 크기정보를 담을 수 있는 객체. 위치정보는 안되고, 크기정보만 담을 수 있다. CGRect : 위치정보와 크기정보를 모두 담을 수 있는 객체. 그렇다 CGPoint와 CGSize를 합해놓은 정보이다.
Day by day iPhone Programming 2010. by Young Oh Jeong