Day by day iPhone Programming

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);


�이런 방식이라면, 타원도 간단하게 그릴수 있겠지요.

4단계.

이제 만들어진 CGRect의 사각형 영역에 내접하는 원을 그릴 차례입니다만, 간단하게 처리가 되었습니다.

5단계.

이제 이렇게 원 그리기의 마무리입니다.

정리해서 메써드안에 표현해 보면 아래와 같습니다.

... - (void)drawRect:(CGRect)rect { // Drawing code CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetStrokeColorWithColor(context,[UIColor redColor].CGColor); CGRect rectangle = CGRectMake(60,170,200,200); CGContextAddEllipseInRect(context, rectangle); CGContextStrokePath(context); }

CGRect 로 지정하는 사각형 영역

내접하는 원

(60, 170)

200

200

CGContextAddEllipseInRect(context, rectangle);

CGContextStrokePath(context);


...

다음 호 그리기를 해 봅시다.

호라는 것이 원을 그리다가 원하는 부분까지만 그리고 멈추는 형태입니다. 그렇다보니, 원에 필요한 요소가 다 필요하고, 거기에 또, 어디서 부터 어디까지만 그려야 한다는 정보까지 필요합니다. 따라서 호 그리기는 원 그리기 보다 좀 더 많은 값을 입력해야 합니다. 4단계에서 입력하는 값들에 대해 살펴볼 것 입니다..

호를 그리는 단계 중 처음은 다른 그리기와 같습니다.

1단계.

위 코드라인으로 context를 만들어 두어야 하고,

2단계.

위와 같이 그리는 선의 색이나 안쪽에 칠할 색을 지정해 주어야 합니다.

3단계.

이렇게 호를 그릴 중심점을 잡습니다.

4단계.

이제 좀 많은 값들이 입력되어야 하는데요. CGContextAddArc의 인자값이 7개나 됩니다.

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetStrokeColorWithColor(context,[UIColor redColor].CGColor);

or

CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);

CGContextMoveToPoint(context, x, y);

CGContextAddArc(context, x, y, 100, radians(0), radians(240), 0);


�

그런데 40˚는 몇 라디안 일까? 50˚는?이렇게 잠시나마 radian 계산을 어떻게 할까? 하고 고민 하신분들도 안심하셔도 됩니다. 기본적으로 radian이라는 메써드를 만들어두면, 우리가 편안하게 사용하는 각도의 개념(90˚, 120˚와 같은 쉬운 개념)을 그대로 사용할 수 있습니다.

�라디안(radian) 계산공식은,

�입니다.

π는 3.14159265358979323846... 하고 계속 가는 무한소수 이지요. 사실 이렇게까지 정확하게 할 필요성은 없지만, 일단,

#define PI 3.14159265358979323846

이렇게 해서 파이(PI)값을 지정해 두고 라디안 구하는 공식에 대입연산하는 인라인 메써드를 만듭니다.

static inline float radians(double degrees) { return degrees * PI / 180; }

이제 이렇게 해두면 편안하게 우리에게 익숙한 값인 각도 만으로 계산하여, 개발을 할 수 있게 되지요.

CGContextAddArc(context, x, y, 100, radians(0), radians(240), 0);

context객 중심점 x좌

중심점 y좌

반지름 크

시작하는 각도

끝나는 각도

각도를 측정하는 방향0 일때 : 시계방향

clockwise시계방향

counterclockwise반시계방향 0 ° (0 radian)

240 ° (2π/3 radian)

(x, y)중심점

라디안(radian) = π 180

X (각도)


#import "TestCanvas.h" #define PI 3.14159265358979323846 static inline float radians(double degrees) { return degrees * PI / 180; }

@implementation TestCanvas ...

마지막 인자 값(시계방향이냐 반시계방향이냐)을 달리함에 따라서 아래와 같이 결과가 달라집니다.

�

5단계.

마지막 인자값이 0 일때 마지막 인자값이 1 일때

CGContextClosePath(context); CGContextStrokePath(context);


이제 이렇게 호 그리기의 마무리입니다.

정리해서 drawRect 메써드안에 표현해 보면 아래와 같습니다.


CGContextSetStrokeColorWithColor(context,[UIColor blackColor].CGColor); CGContextMoveToPoint(context, x, y); CGContextAddArc(context, x, y, 100, radians(0), radians(240), 1); CGContextClosePath(context); CGContextStrokePath(context);

} ...

이 정도 공부를 하고 나니 이제 파이그래프를 그릴수 있을것 같습니다. 우리는 아래와 같은 그래프를 그릴 것입니다. 그래프의 개념을 이번 학기 성적을 내는 비율을 나타내는 것으로 하겠습니다. 출석점수가 30%, 과제점수가 30%, 그리고 시험점수가 40%의 비율로 학기성적이 결정난다면, 전체 원을 해당 점수비율에 맞추어 보여주어야 합니다.

아래 그림을 보면 호가 3개 있는 것을 알수 있습니다. 파란색 호, 초록색 호, 빨간색 호 3개만 그리면 파이그래프가 완성됩니다.

�문제는 radian 즉, 각도이겠지요. 그래프를 그리려면 시작지점, 여기서는 정확하게 시작 각도를 정해야 합니다. 시작각도는 위 그림에서 파란색과 초록색이 만나는 그 지점을 기준으로 시작점을 잡겠습니다.

문 : 파란색과 초록색이 만나는 그 지점은 몇도일까요? 답 : 시계방향으로 하면 270˚, 반시계방향으로 하면 90˚ 입니다.

중심점

전체(360˚)의 40%

전체 (360˚) 의 30%

전체 (360˚) 의 30%


그렇다면 그 다음 정해야 할것은 시계방향으로 할것인지 반시계방향으로 할 것인지 이겠네요. 흠... 시계방향으로 합시다. 자 이제 시작지점 각도가 270˚로 정해 졌습니다.

그럼 이제 초록색 호 부터 시계방향으로 그려나가면 되겠습니다. 이전에 그린 호의 끝 각이 다음에 그릴 호의 시작각이 되도록 하면, 연속적으로 이어지는 파이그래프를 그릴수가 있습니다.

초록색 호 : (270)˚ 부터 (270 + 30/100)˚ 까지

... CGContextSetFillColorWithColor(context, [[UIColor greenColor] CGColor]); CGContextMoveToPoint(context, x, y);

CGContextAddArc(context, x, y, 100, radians(angle_start), radians(angle_start+360*30/100), 0);

CGContextClosePath(context); CGContextFillPath(context); ...

빨강색 호 : (270 + 30/100)˚ 부터 (270 + 30/100)˚ + (270 + 30/100)˚ 까지

... CGContextSetFillColorWithColor(context, [[UIColor redColor] CGColor]); CGContextMoveToPoint(context, x, y);

CGContextAddArc(context, x, y, 100, radians(angle_start+360*30/100), radians(angle_start+360*30/100 + 360*30/100), 0);


파랑색 호 : (270 + 30/100)˚ + (270 + 30/100)˚ 부터 (270)˚ 까지

... CGContextSetFillColorWithColor(context, [[UIColor blueColor] CGColor]); CGContextMoveToPoint(context, x, y);

CGContextAddArc(context, x, y, 100, radians(angle_start+360*30/100 + 360*30/100), radians(angle_start), 0);



정리해서 drawRect 메써드안에 표현해 보면 아래와 같습니다.

... - (void)drawRect:(CGRect)rect {

NSInteger gra_height = 300; // p

// Drawing code CGContextRef context = UIGraphicsGetCurrentContext();

//##### u “ p u CGContextSetLineWidth(context, 2.0); CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor); CGContextMoveToPoint(context, 20, 20); CGContextAddLineToPoint(context, 20, gra_height+20); CGContextAddLineToPoint(context, 310, gra_height+20); CGContextStrokePath(context);

//##### uy “ p u

double angle_start = 270.0; NSInteger rate[] = {30, 30, 40};

// 초록색 호 - CGContextSetFillColorWithColor(context, [[UIColor greenColor] CGColor]); CGContextMoveToPoint(context, x, y); CGContextAddArc(context, x, y, 100, radians(angle_start), radians(angle_start+360*rate[0]/100), 0); CGContextClosePath(context); CGContextFillPath(context); // 빨강색 호 - l CGContextSetFillColorWithColor(context, [[UIColor redColor] CGColor]); CGContextMoveToPoint(context, x, y); CGContextAddArc(context, x, y, 100, radians(angle_start+360*rate[0]/100), radians(angle_start+360*rate[0]/100 + 360*rate[1]/100), 0); CGContextClosePath(context); CGContextFillPath(context);


// 파랑색 호 - CGContextSetFillColorWithColor(context, [[UIColor blueColor] CGColor]); CGContextMoveToPoint(context, x, y); CGContextAddArc(context, x, y, 100, radians(angle_start+360*rate[0]/100 + 360*rate[1]/100), radians(angle_start), 0); CGContextClosePath(context); CGContextFillPath(context); } ...

이제 애뮬레이터에서 실행시키면 아래와 같이 정상적으로 화면에 그려질 것입니다.

[번외강의] 곡선을 그리고 싶어요! (2차곡선편)


2차 곡선은 2차 방정식 그래프처럼 한 곳만 유연하게 꺾여있는 곡선입니다. 유연하게 꺾이지 않고 각이 져있다면, 그것은 예전에 그렸던 다각형(polygon)이라고 합니다.

iOS에서는 이러한 2차곡선을 그리기위해 CGContextAddQuadCurveToPoint 라는 메써드를 제공합니다.

일단 시작점을 CGContextMoveToPoint로 잡고나서,

CGContextMoveToPoint(context, 10, 200);

CGContextAddQuadCurveToPoint를 아래와 같이 호출하면 됩니다.

시작점과 컨트롤 포인트, 그리고 끝점의 관계는 아래 그림을 보면 이해하실 수 있을 것입니다.

아래 drawRect 메써드에 정리된 소스코드을 확인해 보세요.

... - (void)drawRect:(CGRect)rect

y = x ⇒20

2차방정식 그래프

CGContextAddQuadCurveToPoint(context, 150, 10, 300, 200);

컨트롤 포인트(x1, y1)

끝점(x2, y2)

시작점(10, 200)

컨트롤포인트(150, 10)

끝점(300, 200)

접선


{ // Drawing code CGContextRef context = UIGraphicsGetCurrentContext();


//##### uy “ p u

CGContextSetLineWidth(context, 2.0); CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor); CGContextMoveToPoint(context, 10, 200); CGContextAddQuadCurveToPoint(context, 150, 10, 300, 200); CGContextStrokePath(context); } ...


[번외강의] 곡선을 그리고 싶어요! (3차곡선편)


�

3차 곡선은 3차 방정식 그래프처럼 두 곳이 유연하게 꺾여있는 곡선입니다. iOS에서는 이러한 3차곡선을 그리기위해 CGContextAddCurveToPoint 라는 메써드를 제공합니다.

일단 시작점을 CGContextMoveToPoint로 잡고나서,

CGContextMoveToPoint(context, 10, 200);

CGContextAddCurveToPoint 아래와 같이 호출하면 됩니다.




//##### uy “ p u

CGContextSetLineWidth(context, 2.0);

y = x ⇒33차방정식 그래프 0

CGContextAddCurveToPoint(context, 10,150, 290,150, 300,300);

컨트롤 포인트1(x1, y1)

끝점(x3, y3)

컨트롤 포인트2(x2, y2)


CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor); CGContextMoveToPoint(context, 10, 10); CGContextAddCurveToPoint(context, 10,150, 290,150, 300,300); CGContextStrokePath(context); } ...


점선을 그리고 싶으시면, 선의 속성만 건드리시면 됩니다. 그동안 선의 속성이라고 하면, 굵기, 색상등을 변형해 보았습니다. 이번에는 점선으로 선 속성을 변화시켜 봅시다.

점선을 표현하려면, CGContextSetLineDash 메써드를 사용합시다.

CGFloat dashArray[] = {6, 3}; CGContextSetLineDash(context, 0, dashArray, 2);

중간에 부동소수 배열을 하나 넣는게 있는데, 값이 {6, 3} 이라면, 6픽셀 직선 그리고 나서 3픽셀은 그리지 말고, 다시 6픽셀 그리고 3픽셀은 떼고 그리고... 하는 식으로 점선을 표현하라는 뜻입니다.



CGContextSetLineWidth(context, 5.0); CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor); CGFloat dashArray[] = {6, 3}; CGContextSetLineDash(context, 0, dashArray, 2); CGContextMoveToPoint(context, 10, 10); CGContextAddCurveToPoint(context, 10,150, 290,150, 300,300); CGContextStrokePath(context); } ...

[번외강의] 점선을 그리고 싶어요!

6픽셀 3픽셀


그래프에 사용되는 이미지 (이미지 그리기 연습)그래프에 단색 배경이 아닌, 멋진 배경그림을 넣고 싶으면 어떻게 하면 될까요?

먼저 배경으로 사용할 이미지를 구합시다.


[bg.jpg 파일]

화면에 이미지를 그릴때에도 동일하게 이미지 파일을 기준으로 UIImage 객체를 만들어야 합니다.

특정 위치(CGPoint)에 이미지 그리기먼저 객체를 만듭시다.

UIImage *myImage = [UIImage imageNamed:@"bg.jpg"];

그리고 나서 한 점을 표현하는 객체(CGPoint)를 만듭니다.

CGPoint imagePoint = CGPointMake(0, 0);

그리고 그 점을 기준으로 그림을 화면에 그리라고 합니다.

[myImage drawAtPoint:imagePoint];


그림

CGPoint 좌표

비교해 봅시다 CGPoint : 한 점의 위치정보를 담을 수 있는 객체. 주로 점(x,y)라는 픽셀좌표 정보. CGSize : 특정 크기정보를 담을 수 있는 객체. 위치정보는 안되고, 크기정보만 담을 수 있다. CGRect : 위치정보와 크기정보를 모두 담을 수 있는 객체. 그렇다 CGPoint와 CGSize를 합해놓은 정보이다.



UIImage *myImage = [UIImage imageNamed:@"bg.jpg"]; CGPoint imagePoint = CGPointMake(0, 0); [myImage drawAtPoint:imagePoint];

[myImage release]; ...

특정 영역(CGRect)안에 이미지 축소해서 그리기그런데 이미지가 우리가 생각한 것보다 좀 컷던 것 같습니다. 전체 그림이 다 나오지 못하고, 일부만 나왔습니다. 그리고 그림이 가로로 길쭉한 그림이라서 세로로 길쭉한 아이폰 화면에는 안들어갈 것 같습니다.


문 : 그림이 화면에 꽉차게 맞춰져서 들어가게는 못할까요?답 : 스크린 화면 뿐만아니라 화면내의 특정 영역에 맞춰서, 그 안에 그림이 들어가게도 할 수 있습니다.

화면안에 한 영역 (한 점이 아닌 한 영역)을 잡습니다.

CGRect imageRect = CGRectMake(0, 0, 320, 480);

그리고나서 그 영역을 기준으로 그림을 그립니다. 한 점을 기준으로 그릴 때는 drawAtPoint을 사용했지만, 한 영역을 기준으로 그릴 때는 drawInRect을 사용합니다.

[myImage drawInRect:imageRect];



UIImage *myImage = [UIImage imageNamed:@"bg.jpg"]; CGRect imageRect = CGRectMake(10, 30, 300, 440); [myImage drawInRect:imageRect]; [myImage release]; ...


그래프에 수치 표기 (글자 그리기 연습)그래프에 글자를 좀 넣고 싶습니다. 실제로 우리는 그래프를 정확하게 그렸지만, 해당영역이 30%인지 40%인지는 눈으로 판단하기 힘들기 때문입니다.

1. 글자 색 지정

화면에 그려지는 글자의 색을 지정할 때는, CGContextSetFillColorWithColor을 사용합니다. (노파심 : CGContextSetStrokeColorWithColor가 아니라 CGContextSetFillColorWithColor입니다. 혼돈하지 마시길... ) 흰색으로 지정해 보겠습니다.

CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);

2. 글자크기 및 글꼴지정(UIFont 객체 생성)

화면에 그려질 글자의 크기와 글자체를 지정해 UIFont객체에 저장해 둡니다.

UIFont *font_txt = [UIFont systemFontOfSize:20.0];

3. 글자가 그려지는 영역객체(CGRect) 생성


글자가 그려지는 영역을 지정해 주어야 합니다.

CGRect rect_txt = CGRectMake(180, 160, 50, 30);

4. 해당 영역에 글자 그리기

drawInRect 메써드는 영역과 글꼴과 글자가 영역안에서 쓰여지는 방식과 글자의 정렬방식을 인자값으로 받습니다. 영역과 글꼴은 이미 만들어둔 객체를 넣어면 됩니다.

글자가 영역안에서 쓰여지는 방식을 정하는 인자값들의 종류는 6가지가 있습니다.

글자의 정렬방식은 왼쪽정렬, 가운데정렬, 오른쪽정렬 3가지 방식중 하나를 정해서 넣어주면 됩니다. 여기서는 왼쪽정렬인 UITextAlignmentLeft을 넣었습니다.

[@"30%%" drawInRect:rect_txt withFont:font_txt lineBreakMode:UILineBreakModeWordWrap alignment:UITextAlignmentLeft];

아래 drawRect 메써드에 정리된 소스코드을 확인해 보세요. 해당위치에 맞추어 각각의 글자들을 그려 주었습니다.

... - (void)drawRect:(CGRect)rect { // Drawing code CGContextRef context = UIGraphicsGetCurrentContext(); ...

CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);

01A H :B2F FH H: U h

01A H :B2F ,@:H: H H: r U h

01A H :B2F ,CA p r b

01A H :B2F : 5H : AF r U wM R5@AI AI CF ? M T R F ? M

01A H :B2F 5:AC5H : AF r U wM R5@AI AI CF ? M T R5@AI AI CF

01A H :B2F 2A C 5H : AF r U w U

M R5@AI AI CF ? M T R5@AI M


UIFont *font_txt = [UIFont systemFontOfSize:20.0]; CGRect rect_txt = CGRectMake(180, 160, 50, 30); [@"30%%" drawInRect:rect_txt withFont:font_txt lineBreakMode:UILineBreakModeWordWrap alignment:UITextAlignmentLeft]; rect_txt = CGRectMake(150, 240, 50, 30); [@"30%%" drawInRect:rect_txt withFont:font_txt lineBreakMode:UILineBreakModeWordWrap alignment:UITextAlignmentLeft]; rect_txt = CGRectMake(100, 160, 50, 30); [@"40%%" drawInRect:rect_txt withFont:font_txt lineBreakMode:UILineBreakModeWordWrap alignment:UITextAlignmentLeft]; } ...

Engineering

Day by day iPhone Programming