[iOS] 그림을 그려서 UIImage로 Export 시키기

이번 포스트는 Core Graphics 의 드로잉 함수를 이용해 그림을 그려서 UIImage 객체화 시키는 것에 관한 내용이다. 드로잉 함수들이야 워낙 많아서 일일이 적기엔 블로그라는 시스템이 맞지 않을 정도고 여기선 그냥 맛보기 함수만 몇 가지 나열한다.

가장 기본적으로 Context 를 만들어야 한다.

UIGraphicsBeginImageContextWithOptions(CGSizeMake(200, 200), YES, 0.0);
CGContextRef context = UIGraphicsGetCurrentContext();

Options의 내용은 그림의 사이즈 그리고 레티나인지 아닌지에 따라 자동으로 확장되는 형태의 옵션이다. 요즘은 크게 신경쓰지 않고 이런 식으로 정하면 되는데 필요하다면 레퍼런스 문서를 참조해서 원하는 옵션을 주자.

이제 context를 푸쉬한다.

UIGraphicsPushContext(context);

이제부터 그림을 그리기 시작한다. 일반적인 CG 로 시작되는 C API를 활용해 그리면 된다.

공통적으로 사용되는 건 색을 선택하는 것이다. 일반적으로 Fill Color 와 Stroke Color 두 가지로 나뉜다.

UIColor *fillColor = [UIColor blackColor];
CGContextSetFillColorWithColor(context, fillColor.CGColor);

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

색상을 선택하는 API는 여러가지가 있는데 위의 CGContextSet...WithColor 라는 함수는 CGColorRef 타입을 받기 때문에 UIColor의 CGColor 프로퍼티를 넘겨주는 형태로 사용이 가능하다.

일반적으로 가장 많이 쓰이는 건 드로잉 함수는 아마도 사각형을 그리는 것 같다.

CGContextFillRect(context, CGRectMake(0, 0, 100, 50));

사각형을 그리고 이 내부를 FillColor로 채우는 함수다. 화면을 지우거나 등등 다양한 요소에 활용된다.

텍스트를 그리는 건 NSString 의 메서드를 이용 할 수 있다.

NSString *text = @"Test Text";
[text drawInRect:CGRectMake(0, 0, 100, 50)
        withFont:[UIFont systemFontOfSize:18]
   lineBreakMode:NSLineBreakByWordWrapping
       alignment:NSTextAlignmentLeft];

텍스트 그리기 API도 종류가 많다. 위의 예제는 멀티라인 텍스트를 그리기 위한 코드이다.

이미지를 그리는 건 함수를 이용 할 수도 있고 UIImage 의 메서드를 이용 할 수도 있다.

UIImage *image = [UIImage imageNamed:@"someImageFile.png"];

[image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
// or
CGContextDrawImage(context,
                   CGRectMake(0, 0, image.size.width, image.size.height),
                   image.CGImage);

두 방법 모두 그림을 그리지만 CGContextDrawImage의 경우 UIImage에 저장된 방향 정보가 적용되지 않아서 뒤집혀서 그려지는 등의 문제가 발생 할 수도 있다. 이럴때는 UIImage의 drawInRect 메서드를 활용하는 편이 좋다.

그림을 모두 그렸으면 마무리를 하고 제목의 목적처럼 UIImage로 뽑아낸다.

UIGraphicsPopContext();

UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Context 는 Begin이 있었으니 당연히 End가 있어야 한다. 동일하게 Push도 했으니 Pop도 해 줘야 한다. UIGraphicsGetImageFromCurrentImageContext 함수를 이용해 방금 그린 context의 내용을 UIImage로 뽑아낼 수 있다.

이 후에는 outputImage를 이용해 구워삶아 먹으면(?) 된다.