ios繪圖demo,做一個塗鴉板(上)

摘要： 如果你依然在程式設計的世界裡迷茫，不知道自己的未來規劃，小編給大家推薦一個IOS高階交流群：458839238 裡面可以與大神一起交流並走出迷茫。小白可進群免費領取學習資料，看看前輩們是如何在程式設計的世界裡傲然前行！ 群內提供資料結構與演算法、底層進階、swift、逆向、整合面試題等免費...

如果你依然在程式設計的世界裡迷茫，不知道自己的未來規劃，小編給大家推薦一個IOS高階交流群：458839238 裡面可以與大神一起交流並走出迷茫。小白可進群免費領取學習資料，看看前輩們是如何在程式設計的世界裡傲然前行！

群內提供資料結構與演算法、底層進階、swift、逆向、整合面試題等免費資料

附上一份收集的各大廠面試題（附答案） ! 群檔案直接獲取

各大廠面試題

之前一篇文字寫了ios繪圖基礎，這篇文章，使用之前寫的繪圖基礎，做一個塗鴉板。並把每一步完成都結果都單獨儲存一個檔案，加上v+版本號

ios繪圖基礎

ios繪圖demo,做一個塗鴉板(上)

• 1完成一個最基本的塗鴉板
• 2給塗鴉板加上顏色選擇功能，和筆觸粗細功能

ios繪圖demo,做一個塗鴉板(下)

• 3畫貝塞爾曲線

ios繪圖demo,做一個塗鴉板(上) 的效果圖：

程式碼下載:github庫，對應此文章的目錄是paint , 點選跳轉程式碼下載地址

1:完成一個最基本的塗鴉板

下載程式碼後見檔案PaintViewV01,看效果請在ViewController中找到PaintView，換成PaintView01

步驟和原理

• 1：重寫uiview的 init、initWithFrame方法，主要是新增一個白色的背景色
• 2：重寫touchesBegan、touchesMoved、touchesEnded，作用是接收螢幕觸控的座標，手指接觸uiview後會依次執行這三個方法。 其中重寫touchesBegan和重寫touchesEnded只在開始和結束執行一次，而手指在移動的過程中，會多次執行touchesMoved
• 3：重寫drawRect方法，根據使用者手指的移動，畫出塗鴉

程式碼（關鍵步驟都已經註釋，應該都能看明白吧）

//
//PaintView.m
//Paint
//
//Created by 劉彥瑋 on 15/7/26.
//Copyright (c) 2015年 劉彥瑋. All rights reserved.
//

#import "PaintViewV01.h"

@implementation PaintViewV01{

//畫的線路徑的集合，內部是NSMutableArray型別
NSMutableArray *paths;
}

-(instancetype)init{
self = [super init];
if (self) {
//初始化uiview的樣式
[self paintViewInit];
}
returnself;
}
-(instancetype)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
//初始化uiview的樣式
[self paintViewInit];
}
returnself;
}

//初始化paintViewInit樣式和資料
-(void)paintViewInit{
//新增背景色
self.backgroundColor = [UIColor whiteColor];
//初始化路徑集合
paths = [[NSMutableArray alloc]init];
}

-(void)drawRect:(CGRect)rect{
//必須呼叫父類drawRect方法，否則 UIGraphicsGetCurrentContext()獲取不到context
[super drawRect:rect];
//獲取ctx
CGContextRef ctx = UIGraphicsGetCurrentContext();
//渲染所有路徑
for (int i=0; i<paths.count; i++) {
NSMutableArray *pathPoints = [paths objectAtIndex:i];
CGMutablePathRef path = CGPathCreateMutable();
for (int j=0; j<pathPoints.count; j++) {
CGPoint point = [[pathPoints objectAtIndex:j]CGPointValue] ;
if (j==0) {
CGPathMoveToPoint(path, &CGAffineTransformIdentity, point.x,point.y);
}else{
CGPathAddLineToPoint(path, &CGAffineTransformIdentity, point.x, point.y);
}
}
//路徑新增到ct
CGContextAddPath(ctx, path);
//描邊
CGContextStrokePath(ctx);
}
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
//建立一個路徑，放到paths裡面
NSMutableArray *path = [[NSMutableArray alloc]init];
[paths addObject:path];
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
//獲取當前路徑
NSMutableArray *path = [paths lastObject];
//獲取當前點
CGPoint movePoint = [[touches anyObject]locationInView:self];
NSLog(@"touchesMovedx:%f,y:%f",movePoint.x,movePoint.y);
//CGPint要通過NSValue封裝一次才能放入NSArray
[path addObject:[NSValue valueWithCGPoint:movePoint]];
//通知重新渲染介面，這個方法會重新呼叫UIView的drawRect:(CGRect)rect方法
[self setNeedsDisplay];
}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{

}

@end

1完成後，就可以畫畫了，不過只能畫固定粗細的黑色筆畫，下面，我我們增加彩色筆畫和控制粗細的功能

2:給塗鴉板加上顏色和筆觸粗細選擇的功能

下載程式碼後見檔案PaintViewV02,看效果請在ViewController中找到PaintView，換成PaintView02

步驟

• 1增加一個數據物件，封裝筆觸pathPoint、筆觸顏色、筆觸粗細
• 2修改變數名稱，增加變數
• 3修改介面，新增色板，和筆觸粗細選擇器
• 4修改原來的touchesBegan,touchesMoved方法，將選擇的顏色資料和粗細資料封裝
• 5修改drawRect方法

1增加一個數據物件，封裝筆觸pathPoint、筆觸顏色、筆觸粗細

//
//PaintStep.h
//Paint
//
//Created by 劉彥瑋 on 15/7/26.
//Copyright (c) 2015年 劉彥瑋. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface PaintStep : NSObject{

@public
//路徑
NSMutableArray *pathPoints;
//顏色
CGColorRef color;
//筆畫粗細
float strokeWidth;
}

@end

//
//PaintStep.m
//Paint
//
//Created by 劉彥瑋 on 15/7/26.
//Copyright (c) 2015年 劉彥瑋. All rights reserved.
//

#import "PaintStep.h"

@implementation PaintStep

@end

2修改變數名稱，增加變數，

paths 改名為 paintSteps,並增加currColor和slider兩個變數

//螢幕的寬高，做自適應用的
#define width[UIScreen mainScreen].bounds.size.width
#define height [UIScreen mainScreen].bounds.size.height

@implementation PaintViewV02{

//畫的線路徑的集合，內部是NSMutableArray型別
NSMutableArray *paintSteps;
//當前選中的顏色
UIColor *currColor;
//當前筆觸粗細選擇器
UISlider *slider;

}

3修改介面，新增色板，和筆觸粗細選擇器

(void)paintViewInit 方法增加對兩個方法的呼叫 —

-(void)paintViewInit 方法增加

....

//建立色板
[self createColorBord];

//建立筆觸粗細選擇器
[self createStrokeWidthSlider];
}

建立色板和建立筆觸粗細選擇器的實現

//建立色板
-(void)createColorBord{
//預設當前筆觸顏色是黑色
currColor = [UIColor blackColor];
//色板的view
UIView *colorBoardView = [[UIView alloc]initWithFrame:CGRectMake(0, 20, width, 20)];
[self addSubview:colorBoardView];
//色板樣式
colorBoardView.layer.borderWidth = 1;
colorBoardView.layer.borderColor = [UIColor blackColor].CGColor;

//建立每個色塊
NSArray *colors = [NSArray arrayWithObjects:
[UIColor blackColor],[UIColor redColor],[UIColor blueColor],
[UIColor greenColor],[UIColor yellowColor],[UIColor brownColor],
[UIColor orangeColor],[UIColor whiteColor],[UIColor orangeColor],
[UIColor purpleColor],[UIColor cyanColor],[UIColor lightGrayColor], nil];
for (int i =0; i<colors.count; i++) {
UIButton *btn = [[UIButton alloc]initWithFrame:CGRectMake((width/colors.count)*i, 0, width/colors.count, 20)];
[colorBoardView addSubview:btn];
[btn setBackgroundColor:colors[i]];
[btn addTarget:self action:@selector(changeColor:) forControlEvents:UIControlEventTouchUpInside];
}

}

//切換顏色
-(void)changeColor:(id)target{
UIButton *btn = (UIButton *)target;
currColor = [btn backgroundColor];
}

//建立筆觸粗細選擇器
-(void)createStrokeWidthSlider{
slider = [[UISlider alloc]initWithFrame:CGRectMake(0, 50, width, 20)];
slider.maximumValue = 20;
slider.minimumValue = 1;
[self addSubview:slider];
}

4修改原來的touchesBegan,touchesMoved方法，將選擇的顏色資料和粗細資料封裝

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

PaintStep *paintStep = [[PaintStep alloc]init];
paintStep->color = currColor.CGColor;
paintStep->pathPoints =[[NSMutableArray alloc]init];
paintStep->strokeWidth = slider.value;
[paintSteps addObject:paintStep];
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{

//獲取當前路徑
PaintStep *step = [paintSteps lastObject];
NSMutableArray *pathPoints = step->pathPoints;

....
}

5：修改drawRect方法

-(void)drawRect:(CGRect)rect{

....

//渲染所有路徑
for (int i=0; i<paintSteps.count; i++) {
....

//設定path 樣式
CGContextSetStrokeColorWithColor(ctx, step->color);
CGContextSetLineWidth(ctx, step->strokeWidth);
//路徑新增到ct
CGContextAddPath(ctx, path);

....
}
}

完成後，我們的畫板就可以畫出彩色的筆畫，控制粗細了。之後，我會繼續給畫板增加一些功能，並把方法寫出來。

| ios繪圖demo,做一個塗鴉板(上) | 完成後的效果圖：