IOS簡單畫板實現，ios畫板

IOS簡單畫板實現，ios畫板

 

 

 設計要求

 1、畫筆能設定大小、顏色

 2、有清屏、撤銷、橡皮擦、匯入照片功能

 3、能將繪好的畫面儲存到相簿

 

實現思路

 1、畫筆的實現，我們可以通過監聽使用者的 平移手勢 中建立 UIBezierPath 來實現線條的繪製

 2、撤銷功能，我們先來看下撤銷功能，我們會想到用一個數組隊列將使用者的每一次的筆畫都加入到數組中，然後撤銷的時候只需要將最後添加進去的筆畫pop掉，重新繪製就可以了

 3、清屏功能就簡單了，只需要將上面說到的那個數組清空重新繪製下就可以了

 4、匯入照片功能，可以用系統的 UIImagePickerController 選取照片得到UIImage，然後再將 UIImage 繪製到螢幕中就可以了

 5、儲存到相簿功能，可以使用 UIGraphicsGetImageFromCurrentImageContext 擷取當前的圖片上下文，得到螢幕畫面的 UIImage ,然後通過 UIImageWriteToSavedPhotosAlbum 寫入到相簿

 

具體代碼實現

 1、先畫個介面

2、因為我們繪製線條會用到 UIBezierPath ，並且要能可設定顏色，但是UIBezierPath是沒有設定顏色的屬性，所以我們這裡需要簡單擴充一下，建立一個繼承於 UIBezierPath 的子類 DrawPath

////  DrawPath.h//  畫板////  Created by xgao on 16/4/13.//  Copyright © 2016年 xgao. All rights reserved.//#import <UIKit/UIKit.h>@interface DrawPath : UIBezierPath
// 畫筆顏色@property(nonatomic,retain)UIColor* pathColor;@end

這個子類只需要擴充一個屬性，就是 pathColor 用來儲存畫筆的顏色

////  DrawPath.m//  畫板////  Created by xgao on 16/4/13.//  Copyright © 2016年 xgao. All rights reserved.//#import "DrawPath.h"@implementation DrawPath@end

DrawPath.m 裡面不需要做其它功能

3、接到來我們對畫板功能的實現封裝一下，建立一個繼承於UIView的 DrawView子類

////  DrawView.h//  畫板////  Created by xgao on 16/4/13.//  Copyright © 2016年 xgao. All rights reserved.//#import <UIKit/UIKit.h>@interface DrawView : UIView// 畫線的寬度@property(nonatomic,assign)CGFloat lineWidth;// 線條顏色@property(nonatomic,retain)UIColor* pathColor;// 載入背景圖片@property(nonatomic,strong)UIImage* image;// 清屏- (void)clear;// 撤銷- (void)undo;// 橡皮擦- (void)eraser;// 儲存- (void)save;@end

////  DrawView.m//  畫板////  Created by xgao on 16/4/13.//  Copyright © 2016年 xgao. All rights reserved.//#import "DrawView.h"#import "DrawPath.h"@interface DrawView()@property(nonatomic,strong) DrawPath* path;// 線的數組@property(nonatomic,strong) NSMutableArray* paths;@end@implementation DrawView- (void)awakeFromNib{    [self setUp];}- (instancetype)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        [self setUp];    }    return self;}// 重繪UI- (void)drawRect:(CGRect)rect {        for (DrawPath* path in self.paths) {                if ([path isKindOfClass:[UIImage class]]) {            // 畫圖片            UIImage* image = (UIImage*)path;            [image drawInRect:rect];        }else{            // 畫線                        // 設定畫筆顏色            [path.pathColor set];                        // 繪製            [path stroke];        }    }}// 懶載入屬性- (NSMutableArray*)paths{        if (_paths == nil) {        _paths = [NSMutableArray array];    }    return _paths;}// 重寫image屬性- (void)setImage:(UIImage *)image{    _image = image;        // 將圖片加入到線條數組中    [self.paths addObject:image];        [self setNeedsDisplay];}#pragma mark - Init// 初始化- (void)setUp{        // 添加平移手勢    UIPanGestureRecognizer* panGes = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panGes:)];    [self addGestureRecognizer:panGes];        // 預設值    self.lineWidth = 1;    self.pathColor = [UIColor blackColor];}#pragma mark - Event// 平移事件- (void)panGes:(UIPanGestureRecognizer*)ges{        // 擷取當前點    CGPoint curPoint = [ges locationInView:self];        if (ges.state == UIGestureRecognizerStateBegan) { // 開始移動                // 建立貝茲路徑        _path = [[DrawPath alloc]init];                // 設定線條寬度        _path.lineWidth = _lineWidth;        // 線條預設顏色        _path.pathColor = _pathColor;                // 設定起始點        [_path moveToPoint:curPoint];                [self.paths addObject:_path];    }        // 連線    [_path addLineToPoint:curPoint];        // 重繪    [self setNeedsDisplay];}#pragma mark - Method// 清屏- (void)clear{        [self.paths removeAllObjects];        [self setNeedsDisplay];}// 撤銷- (void)undo{        [self.paths removeLastObject];        [self setNeedsDisplay];}// 橡皮擦- (void)eraser{        self.pathColor = [UIColor whiteColor];        [self setNeedsDisplay];}// 儲存- (void)save{        // ---- 操作    // 開啟上下文    UIGraphicsBeginImageContextWithOptions(self.frame.size, NO, 0);        // 擷取當前上下文    CGContextRef context = UIGraphicsGetCurrentContext();        // 渲染圖層到上下文    [self.layer renderInContext:context];        // 從上下文中擷取圖片    UIImage* image = UIGraphicsGetImageFromCurrentImageContext();        // 關閉上下文    UIGraphicsEndImageContext();        // ---- 儲存圖片    UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);    }// 圖片儲存方法，必需寫這個方法體，不能會儲存不了圖片- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo{        // 提示    UIAlertView* alert = [[UIAlertView alloc]initWithTitle:@"儲存成功" message:nil delegate:nil cancelButtonTitle:@"ok" otherButtonTitles:nil, nil];    [alert show];}@end

 

4、接下來就是如果使用這個畫板類了，直接上代碼吧

////  ViewController.m//  畫板////  Created by xgao on 16/4/13.//  Copyright © 2016年 xgao. All rights reserved.//#import "ViewController.h"#import "DrawView.h"@interface ViewController ()<UIImagePickerControllerDelegate,UINavigationControllerDelegate>// 畫板@property (weak, nonatomic) IBOutlet DrawView *drawView;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    }#pragma mark - Event// 線條寬度變化- (IBAction)lineWidthChange:(UISlider*)sender {        _drawView.lineWidth = sender.value;}// 線條顏色變化- (IBAction)pathColorChange:(UIButton*)sender {        _drawView.pathColor = sender.backgroundColor;}// 清屏- (IBAction)clearAction:(id)sender {    [_drawView clear];}// 撤銷- (IBAction)undoAction:(id)sender {    [_drawView undo];}// 橡皮擦- (IBAction)eraserAction:(id)sender {    [_drawView eraser];}// 照片- (IBAction)pickerPhotoAction:(id)sender {        // 照片選擇控制器    UIImagePickerController* picVC = [[UIImagePickerController alloc]init];    // 照片源    picVC.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;    // 委託    picVC.delegate = self;        [self presentViewController:picVC animated:YES completion:nil];}// 儲存- (IBAction)saveAction:(id)sender {        [_drawView save];}#pragma mark - UIImagePickerControllerDelegate- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)image editingInfo:(nullable NSDictionary<NSString *,id> *)editingInfo{        // 設定圖片    _drawView.image = image;        // 關閉視窗    [self dismissViewControllerAnimated:YES completion:nil];}@end

 

到這裡就差不多了，這個小功能實現的基本思路與具體代碼我都已經放上來了，大家如果還有哪裡不清楚的可以留言喔～～