iOS 製作一個簡單的畫板，ios製作畫板

iOS 製作一個簡單的畫板，ios製作畫板

製作簡單畫板

  作為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;

 

    }    

 

}

 

 

   這樣一個簡單的塗鴉版就製作成了，裡面肯定還有許多不足之處，小博第一次寫博，剛接觸經驗不足，還請各位給點建議，我會繼續改進。謝謝。