在iOS中實現一個簡單的畫板App

本文轉載自查看原文 2014-11-01 14:55 17310 iOS

在這個隨筆中，我們要為iPhone實現一個簡單的畫板App。

首先需要指出的是，這個demo中使用QuarzCore進行繪畫，而不是OpenGL。這兩個都可以實現類似的功能，區別是OpenGL更快，但是QuarzCore更簡單。

第一步，新建Xcode項目，項目名稱就叫SimplePaint。

第二步，添加QuarzCore.framework到項目中。

第三步，創建一個新類，類名叫Line。它代表在iPhone的屏幕上繪畫時候的線。因為不管是畫一條直線還是一條曲線，都可以看做是多條短的直線連接起來的。那么Line需要的是什么屬性呢？簡單點就是，這條線的開始點和結束點，還有這條線的顏色。所以，打開剛剛創建的Line類，

修改Line.h:

然后修改Line.m:

第四步，接下來創建另一個類，類名叫做ColorPiker。它代表顏色選擇器，我們可以點擊多個顏色中的一個作為畫筆的顏色進行繪畫。以下是ColorPiker.h的代碼：

aColorPikerIsSelected是一個委托，當當前選擇器被選中后，它可以把當前選中的顏色選擇器的顏色值傳遞出去，傳遞給實現了這個委托的類。在我們的這個demo中，我們會讓畫板View的實現此委托。

實現ColorPiker.m:

第五步，接下來我們就創建我們的畫板View，它代表可以畫圖的那部分有效區域。創建一個新類叫做TouchDrawView。修改TouchDrawView.h的內容：

剛剛上文中也提過了，我們畫圖的主要思想就是把多個短線首尾連接起來，就可以成為一條軌跡。所以我們的畫板有一個array，它的item就是Line類型，它就是滑過軌跡的所有Line的集合。我們還有一個單獨的Line對象，表示在繪畫過程中，當前正在畫的這條線。另外有一個Color類型的屬性，表示線的顏色，也就是用來保存ColorPiker傳遞出來的顏色值。

實現TouchDrawView.m

  1 //
  2 //  TouchDrawView.m
  3 //  CaplessCoderPaint
  4 //
  5 //  Created by backslash112 on 14/10/29.
  6 //  Copyright (c) 2014年 backslash112. All rights reserved.
  7 //
  8 
  9 #import "TouchDrawView.h"
 10 #import "Common.h"
 11 
 12 @implementation TouchDrawView
 13 {
 14 }
 15 @synthesize currentLine;
 16 @synthesize linesCompleted;
 17 @synthesize drawColor;
 18 
 19 - (id)initWithCoder:(NSCoder *)c
 20 {
 21     self = [super initWithCoder:c];
 22     if (self) {
 23         linesCompleted = [[NSMutableArray alloc] init];
 24         [self setMultipleTouchEnabled:YES];
 25         
 26         drawColor = [UIColor blackColor];
 27         [self becomeFirstResponder];
 28     }
 29     return self;
 30 }
 31 
 32 //  It is a method of UIView called every time the screen needs a redisplay or refresh.
 33 - (void)drawRect:(CGRect)rect
 34 {
 35     CGContextRef context = UIGraphicsGetCurrentContext();
 36     CGContextSetLineWidth(context, 5.0);
 37     CGContextSetLineCap(context, kCGLineCapRound);
 38     [drawColor set];
 39     for (Line *line in linesCompleted) {
 40         [[line color] set];
 41         CGContextMoveToPoint(context, [line begin].x, [line begin].y);
 42         CGContextAddLineToPoint(context, [line end].x, [line end].y);
 43         CGContextStrokePath(context);
 44     }
 45 }
 46 
 47 - (void)undo
 48 {
 49     if ([self.undoManager canUndo]) {
 50         [self.undoManager undo];
 51         [self setNeedsDisplay];
 52     }
 53 }
 54 
 55 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
 56 {
 57     [self.undoManager beginUndoGrouping];
 58     for (UITouch *t in touches) {
 59         // Create a line for the value
 60         CGPoint loc = [t locationInView:self];
 61         Line *newLine = [[Line alloc] init];
 62         [newLine setBegin:loc];
 63         [newLine setEnd:loc];
 64         [newLine setColor:drawColor];
 65         currentLine = newLine;
 66     }
 67 }
 68 
 69 - (void)addLine:(Line*)line
 70 {
 71     [[self.undoManager prepareWithInvocationTarget:self] removeLine:line];
 72     [linesCompleted addObject:line];
 73 }
 74 
 75 - (void)removeLine:(Line*)line
 76 {
 77     if ([linesCompleted containsObject:line])
 78         [linesCompleted removeObject:line];
 79 }
 80 
 81 - (void)removeLineByEndPoint:(CGPoint)point
 82 {
 83     NSPredicate *predicate = [NSPredicate predicateWithBlock:^BOOL(id evaluatedObject, NSDictionary *bindings) {
 84         Line *evaluatedLine = (Line*)evaluatedObject;
 85         return evaluatedLine.end.x == point.x &&
 86         evaluatedLine.end.y == point.y;
 87     }];
 88     NSArray *result = [linesCompleted filteredArrayUsingPredicate:predicate];
 89     if (result && result.count > 0) {
 90         [linesCompleted removeObject:result[0]];
 91     }
 92 }
 93 
 94 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
 95 {
 96     for (UITouch *t in touches) {
 97         [currentLine setColor:drawColor];
 98         CGPoint loc = [t locationInView:self];
 99         [currentLine setEnd:loc];
100         
101         if (currentLine) {
102             [self addLine:currentLine];
103         }
104         Line *newLine = [[Line alloc] init];
105         [newLine setBegin:loc];
106         [newLine setEnd:loc];
107         [newLine setColor:drawColor];
108         currentLine = newLine;
109     }
110     [self setNeedsDisplay];
111 }
112 
113 - (void)endTouches:(NSSet *)touches
114 {
115     [self setNeedsDisplay];
116 }
117 
118 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
119 {
120     [self endTouches:touches];
121     [self.undoManager endUndoGrouping];
122 }
123 
124 - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
125 {
126     [self endTouches:touches];
127 }
128 
129 - (BOOL)canBecomeFirstResponder
130 {
131     return YES;
132 }
133 
134 - (void)didMoveToWindow
135 {
136     [self becomeFirstResponder];
137 }
138 
139 - (id)initWithFrame:(CGRect)frame
140 {
141     self = [super initWithFrame:frame];
142     if (self) {
143         // Initialization code
144     }
145     return self;
146 }
147 
148 @end

這個文件包含了主要的邏輯，說明下主要方法的作用：

-(id)initWithCoder：當此view被創建的時候這個方法自動調用，所以你不一定必須要實現它；當時當你想在初始化的時候做一些別的工作的時候你就需要實現它。

-(void)drawRect：每次當屏幕需要重新顯示或者刷新的時候這個方法會被調用。

-(void)touchBegan：當你的手指點擊到屏幕的時候這個方法會被調用。

-(void)touchMove：當你的手指點擊屏幕后開始在屏幕移動，它會被調用。隨着手指的移動，相關的對象會秩序發送該消息。

-(void)touchEnd：當你的手指點擊屏幕之后離開的時候，它會被調用。

還需要講解下的是，當每次touchMove方法中，往array中添加入了新的Line，要想在畫布中顯示出來，需要刷新下頁面，調用[self setNeedsDisplay]方法即可。

基本的主要邏輯就是這樣，我們還差什么？當然是UI！

第六步，創建一個 .xib文件，叫做TouchDrawViewController.xib。在右邊的工具箱中添加一個View，再往View中加入多個子View，加多少個你隨意，因為這幾個子View是用來作為顏色選擇器的，多幾個少幾個無所謂。然后設置這幾個子View的Class為 ColorPiker，接着設置他們的背景顏色，顏色值你隨意，因為會把被選中的顏色選擇器的背景顏色直接作為參數傳出來。