(Object-C) UIImageView 위에 Drawing 하기 - (이미지뷰 위에 그림 그리기) Programing/C / Object-C 2012. 3. 21. 17:31

1. 시작하기에 앞서 간단하게 화면을 보여줄 .xlb 파일에 UIImageView와 버튼 하나를 만들고 적당한 위치에 둔뒤 저장을한다.


2. 그다음 .h 파일루 간후 다음 과 같은 코드를 작성한다.

view source
print?
01.#import <uikit uikit.h="">
02. 
03.@interface what : UIViewController {
04.    UIImageView *drawImage;
05.    BOOL mouseMoved;
06.    BOOL mouseSwiped;
07.    CGPoint lastPoint;
08.    CGPoint currentPoint;
09.    IBOutlet UIImageView * card;
10.}
11. 
12.@property (nonatomic, retain) UIWebView *web;
13.@property (nonatomic, retain) UIImageView * card;
14. 
15.@end
16.</uikit>

3. .h 파일의 입력이 완료 되었다면 다음 .m 파일로 가서 나머지 부분을 다음과 같이 작성한다.

view source
print?
001.#import "what.h"
002.@implementation what
003.@synthesize web;
004.@synthesize card;
005. 
006.- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
007.{
008.    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
009.    if (self) {
010.    }
011.    return self;
012.}
013. 
014.- (void)dealloc
015.{
016.    [super dealloc];
017.}
018. 
019.- (void)didReceiveMemoryWarning
020.{
021.    // Releases the view if it doesn't have a superview.
022.    [super didReceiveMemoryWarning];
023.    // Release any cached data, images, etc that aren't in use.
024.}
025. 
026.#pragma mark - View lifecycle
027.- (void)viewDidLoad
028.{
029.    [super viewDidLoad];
030.    // Do any additional setup after loading the view from its nib.
031.    drawImage = [[UIImageView alloc] initWithImage:nil];
032.    drawImage.frame = [card frame];
033.    [self.view addSubview:drawImage];
034.    self.view.backgroundColor = [UIColor whiteColor];
035.    mouseMoved = 0;
036.}
037. 
038.- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
039.    mouseSwiped = NO;
040.    UITouch *touch = [touches anyObject];
041.   //  더블터치시 낙서된 걸 지워주는 역활을 한다.
042.    if ([touch tapCount] == 2) {
043.        drawImage.image = nil;
044.        return;
045.    }
046.    lastPoint = [touch locationInView:self.card];
047.    lastPoint.y -= 0;
048.}
049. 
050.// 터치 이벤트
051.- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
052.    mouseSwiped = YES;
053.    UITouch *touch = [touches anyObject];  
054.// touch locationInView:self.card 라고 되어있는데 이건 UIImageView를 가리키는 부분이다.
055.    currentPoint = [touch locationInView:self.card]; 
056.    currentPoint.y -= 0;
057.    UIGraphicsBeginImageContext(card.frame.size);
058.    [drawImage.image drawInRect:CGRectMake(0, 0, card.frame.size.width, card.frame.size.height)];
059.    CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
060.    CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 5.0);
061.    // 아래 한줄은  drawing시 펜 색깔을 지정해주는 부분이다 뒤에 숫자는 ( 레드, 그린, 블루, 알파(투명) ) 을 나타낸다
062.    CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 1.0, 0.0, 0.0, 1.0);
063.    CGContextBeginPath(UIGraphicsGetCurrentContext());
064.    CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
065.    CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
066.    CGContextStrokePath(UIGraphicsGetCurrentContext());
067.    drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
068.    UIGraphicsEndImageContext();
069.    lastPoint = currentPoint;
070.    mouseMoved++;
071.    if (mouseMoved == 10) {
072.        mouseMoved = 0;
073.    }
074.}
075. 
076.- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
077.    UITouch *touch = [touches anyObject];
078.    if ([touch tapCount] == 2) {
079.        drawImage.image = nil;
080.        return;
081.    }
082.    if(!mouseSwiped) {
083.        UIGraphicsBeginImageContext(self.view.frame.size);
084.        [drawImage.image drawInRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
085.        CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
086.        CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 5.0);
087.        CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 1.0, 0.0, 0.0, 1.0);
088.        CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
089.        CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
090.        CGContextStrokePath(UIGraphicsGetCurrentContext());
091.        CGContextFlush(UIGraphicsGetCurrentContext());
092.        drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
093.        UIGraphicsEndImageContext();
094.    }
095.}
096. 
097.- (void)viewDidUnload
098.{
099.    [super viewDidUnload];
100.    // Release any retained subviews of the main view.
101.    // e.g. self.myOutlet = nil;
102.}
103. 
104.- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
105.{
106.    // Return YES for supported orientations
107.    return YES;
108.}
109.@end



4. 다시 .xlb 파일로 가서 imageview를 card 아울렛과 연결한후 실행하고난뒤 이미지뷰에 드로잉을하면 성공!


위와 같이 UIImageView 위에서만 낙서가 되는걸 볼수가 있다.



# .m 파일에서 터치 이벤트 부분을 자세히 살펴보면 다음과 같은 if문이 있다. 

view source
print?
1.if ([touch tapCount] == 2) {
2.        drawImage.image = nil;
3.        return;
4.}

 이부분은 drawing해서 지저분해진걸 더블클릭으로 깨끗하게 삭제시켜주는 기능이다.

역시 이것또한 Button을 만들어서 Button Action기능을 넣어서 Button 클릭시 

drawImage.image = nil;

이라는 값만 넣어주면 Button 클릭으로 화면에 drawing한걸 초기화시켜 지워 줄수 있도록 수정이 가능하다.

 

'Programing > C / Object-C' 카테고리의 다른 글

(Object-C) 아이폰개발!! 아이폰과 아이패드 구분하는 명령어!!  (4) 2012.04.09
(Object-C) 3. UIButton을 이용한 UIView 전환. 버튼으로 화면 전환 ( 아이폰 )  (6) 2012.03.30
(Object-C) 2. 초보자도 쉽게 따라하는 아이폰개발 UIButton(버튼) 추가해보기!!  (2) 2012.03.26
(Object-C) 1. Xcode 4.2 버전 프로젝트 생성과 빌드 돌려보기!!(아이폰 개발)  (0) 2012.03.23
(Object-C) -addSubview 에서 waring현상 수정 방법  (0) 2012.03.21
,

티스토리툴바