制作簡單畫板
作為iOS初學者，在學習完UI的幾個簡單控件（UILable，UITextField，UIButton）之后，就可以制作一個簡單的畫圖板demo，以下是具體制作流程（在MRC下），如有不足之處，還請各位大神們指教 0.0。
1.搭建界面，主要由UIButton，UITextField組成，底部的按鈕是UITextField的一個自定義鍵盤（inputView）
。
- (void)viewDidLoad {
[super viewDidLoad];
//創建菜單按鈕
UIButton *menuButton = [UIButton buttonWithType:UIButtonTypeSystem];
menuButton.frame = CGRectMake(CGRectGetWidth(self.view.bounds) - 80, 40, 60, 40);
[menuButton setTitle:@"菜單" forState:UIControlStateNormal];
[menuButton addTarget:self action:@selector(handleMenuButtonAction:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:menuButton];
//添加textField，但是不想讓他顯示出來，所以frame ＝ CGRectZero
UITextField *textField = [[UITextField alloc]initWithFrame:CGRectZero];
textField.tag = 123;
[self.view addSubview:textField];
[textField release];
UIView *inputView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 60)];
inputView.backgroundColor = [UIColor whiteColor];
textField.inputView = inputView;
[inputView release];
NSArray *titles = @[@"減小",@"增大",@"撤銷",@"清空",@"顏色"];
CGFloat width = (CGRectGetWidth(self.view.bounds) - 20 * 6) / 5;
CGFloat height = width;
CGFloat originY = (60 - height) / 2;
CGFloat originX = 20;
for (int i = 0 ; i < titles.count; i ++) {
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
button.tag = 100 + i;
button.frame = CGRectMake(originX + (width + originX) * i , originY, width, height);
[button setTitle:titles[i] forState:UIControlStateNormal];
button.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:0.6];
//將標題的顏色改成白色。
[button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
//設置按鈕的角半徑，為按鈕寬帶的一半
button.layer.cornerRadius = width / 4.0;
button.layer.masksToBounds = YES;//按指定的半徑裁減視圖。
[button addTarget:self action:@selector(handleButtonAction:) forControlEvents:UIControlEventTouchUpInside];
[inputView addSubview:button];
}
}
／／ 以下是菜單按鈕的響應方法。
- (void)handleMenuButtonAction:(UIButton *)sender{
//獲取textField
UITextField *textField = (UITextField *)[self.view viewWithTag:123];
//判斷如果textField當前是第一響應者，則撤銷其第一響應者權限，否則讓其成為第一響應者。
if (textField.isFirstResponder) {
[textField resignFirstResponder];
}else{
[textField becomeFirstResponder];//成為第一響應者。
}
}
2.創建一個繼承NSObject的類LineModel，用于記錄線條。
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
//用于記錄線條的三元素(軌跡path 顏色color 寬度width)
@interface LineModel : NSObject
@PRoperty (nonatomic, retain) UIBezierPath *path;//使用貝塞爾曲線紀錄觸摸軌跡。
@property (nonatomic, retain) UIColor *color;//線條顏色
@property (nonatomic, assign) CGFloat width;//線條寬度
@end
#import "LineModel.h"
@implementation LineModel
-(void)dealloc{
[_color release];
[_path release];
[super dealloc];
}
@end
3.創建一個繼承UI View的子類PaintView，將上面的LineModel，具體實現畫圖板。
@interface PaintView : UIView
@property (nonatomic, retain) NSMutableArray *allLines;//用于保存畫板上的所有線條對象。
@property (nonatomic, retain) UIColor *lineColor;//當前的線條顏色。
@property (nonatomic, assign) CGFloat lineWidth;//當前線條的寬
- (void)undoLastDrawing;//撤銷上次繪制
- (void)allClean;//清空畫板。
@end
#import "PaintView.h"
#import "LineModel.h"
@implementation PaintView
-(void)dealloc{
[_allLines release];
[_lineColor release];
[super dealloc];
}
-(NSMutableArray *)allLines{
if (!_allLines) {
self.allLines = [NSMutableArray array];
}
return _allLines;
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *aTouch = touches.anyObject;
CGPoint startPoint = [aTouch locationInView:self.superview];
//創建貝塞爾曲線對象，并設置曲線的起始點。
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
//設置起始點。
[bezierPath moveToPoint:startPoint];
//創建線條模型對象，并保存當前線條的三個數據
LineModel *line = [[[LineModel alloc]init]autorelease];
line.path = bezierPath;
line.color = self.lineColor;
line.width = self.lineWidth;
//添加到數組中等待使用
[self.allLines addObject:line];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *aTouch = touches.anyObject;
CGPoint cuttentPoint = [aTouch locationInView:self.superview];
//獲取對應的線條模型（在觸摸移動的過程中，數組的最后一個對象對應當前正在繪制的曲線）
LineModel *aLine = self.allLines.lastObject;
//在觸摸軌跡上添加點。
[aLine.path addLineToPoint:cuttentPoint];
[self setNeedsDisplay];//調用此方法是通知視圖，繪制界面，一旦調用此方法，系統就會自動調用drawRect:方法來繪制界面。
}
- (void)drawRect:(CGRect)rect{
for (LineModel *aLine in self.allLines) {
//設置填充顏色
[aLine.color setStroke];
//設置繪制時的線條寬度
[aLine.path setLineWidth:aLine.width];
//開始繪制曲線
[aLine.path stroke];
}
}
- (void)undoLastDrawing{
[self.allLines removeLastObject];
[self setNeedsDisplay];//移除數組中的最后一條曲線對象，并重繪界面。
}
- (void)allClean{
[self.allLines removeAllObjects];
[self setNeedsDisplay];//清除所有曲線。
}
@end
4.將PaintView引入視圖控制器中，實現按鈕的方法調用。
／／／重寫loadView將PaintView作為視圖控制器的視圖
- (void)loadView{
PaintView *paintView = [[PaintView alloc]initWithFrame:[[UIScreen mainScreen]bounds]];
paintView.backgroundColor = [UIColor whiteColor];
self.view = paintView;
//設置默認的寬度和顏色。
paintView.lineWidth = 10;
paintView.lineColor = [UIColor blackColor];
[paintView release];
}
／／／／每個按鈕的實現方法。
- (void)handleButtonAction:(UIButton *)sender{
PaintView *paintView = (PaintView *)self.view;
switch (sender.tag) {
case 100:
if (paintView.lineWidth > 2) {
paintView.lineWidth -= 1;
}
break;
case 101:{
paintView.lineWidth += 1;
break;
}
case 102:{
[paintView undoLastDrawing];
break;
}
case 103:{
[paintView allClean];
break;
}
case 104:{
sender.backgroundColor = [UIColor colorWithRed:arc4random() % 256 / 255.0 green:arc4random() % 256 / 255.0 blue:arc4random() % 256 / 255.0 alpha:1];
//設置畫筆顏色
paintView.lineColor = sender.backgroundColor;
break;
}
default:
break;
}
}
這樣一個簡單的涂鴉版就制作成了，里面肯定還有許多不足之處，小博第一次寫博，剛接觸經驗不足，還請各位給點建議，我會繼續改進。謝謝。
新聞熱點
疑難解答
