IOS项目一之简单画板

  这篇文章适用于新手浏览，简单的画板项目应用，可以综合之前所学的东西，大大提高自身的能力。在开发的学习中，的确是挺累人的，愿大家一起坚持下去，勿忘初衷。

先展示效果，让大家知道自己接下来要干什么

一、点击按钮->进入系统图库->点击图片进入下一个页面->再点击图片推入EditorViewController

二、点击小框架->展示到大框架->点击中间按钮，色彩变化->点击颜色按钮

三、点击画笔按钮，设置粗细->点击撤销功能->点击重置功能->保存图片

 

总结：细心的你肯定发现整个view，UIButton占据了一半以上的功能，整个UIButton又有许多选中状态的功能，那么接下来基本都是对UIButton的操作啦，分割宰牛仔来咯~

 

思路一：

1.在SB里，设置背景黑色，添加按钮，添加按钮点击事件(截图大小参差不齐，莫怪，哈哈)

2.ViewController.m代码里面的套路：

#import "ViewController.h"
#import "EditorViewController.h"

@interface ViewController ()<UIImagePickerControllerDelegate,UINavigationControllerDelegate>
@property(nonatomic,strong)UINavigationController *navi;
@end

@implementation ViewController

//在mian.storyboard简称SB哪里，添加按钮点击事件，获取系统图库
- (IBAction)clicked:(UIButton *)sender {
    //UIImagePickerController是系统提供的用来获取图片和视频的接口.
    
    //第一步初始化UIImagePickerController
    UIImagePickerController *vc=[[UIImagePickerController alloc]init];
    
    //第二步添加代理（同时添加协议UIImagePickerControllerDelegate）
    vc.delegate=self;
    
    //点击按钮直接跳转到获取系统图库
    [self presentViewController:vc animated:YES completion:nil];
}


/*
 *下面代码-> 在系统里，将要推出下一个ViewController时，我们在这里写方法。
 *此方法由UINavigationControllerDelegate协议提供，用于在我们获取系统图库，点击图片，要进入下一步时的操作
*/


- (void)navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated{
    //在这里，我们把navigationController给self.navi
        self.navi=navigationController;
}

//选取的信息都在info(系统图库图片)中，info 是一个字典
- (void)imagePickerController:(UIImagePickerController *)picker  didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{
    
    //获取系统原始图片，赋给创建出来的UIImage
    UIImage *image=info[UIImagePickerControllerOriginalImage];
    
    //创建EditorViewController
    EditorViewController *vc=[[EditorViewController alloc]init];
    
    //获取系统图库图片，添加到EditorViewController的image
    vc.image=image;
    
    //将承上启下，推出EditorViewController
    [self.navi pushViewController:vc animated:YES];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

补充：

//字典中的键：

//NSString *const  UIImagePickerControllerMediaType ;指定用户选择的媒体类型（文章最后进行扩展）

//NSString *const  UIImagePickerControllerOriginalImage ;原始图片

//NSString *const  UIImagePickerControllerEditedImage ;修改后的图片

//NSString *const  UIImagePickerControllerCropRect ;裁剪尺寸

//NSString *const  UIImagePickerControllerMediaURL ;媒体的URL

//NSString *const  UIImagePickerControllerReferenceURL ;原件的URL

//NSString *const  UIImagePickerControllerMediaMetadata;当来数据来源是照相机的时候这个值才有效

思路二：

0.创建EditorViewController(以下全部用纯代码显示，希望大家珍惜，也请尊重Zorn的劳动成果)

1.0在 EditorViewController.h 代码声明属性@property(nonatomic,strong)UIImage *image;(得到ViewContrller传过来的image,就可直接用)

@property(nonatomic,strong)UIImage *image;

1.1在 EditorViewController.m 代码- (void)viewDidLoad里添加保存视图->获取的系统图片->框架图片-----saveView->systemIV->frameIV(一步一步来)

#import "EditorViewController.h"
@interface EditorViewController ()

@property(nonatomic,strong)UIImageView *frameIV;
@property(nonatomic,strong)UIView *saveView;
@property(nonatomic,strong)UIImageView *systemIV;

@end
@implementation EditorViewController
- (void)viewDidLoad {

 //设置saveView背景颜色为透明clear

 self.saveView=[[UIView alloc]initWithFrame:CGRectMake(22, 74, 331, 416)];

    self.saveView.backgroundColor=[UIColor clearColor];
    [self.view addSubview:self.saveView];
    //获取系统的图片
    self.systemIV=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 331, 416)];
    self.systemIV.image=self.image;
    [self.saveView addSubview:self.systemIV];
    
    //设置底部交换图片
    self.frameIV=[[UIImageView alloc]initWithFrame:CGRectMake(0,0,331,416)];
    [self.saveView addSubview:self.frameIV];
}

看到了层次关系了没？1.saveView->2.systemIV->3.frameIV，也就3->2->1, 3为肉眼分辨出来的最上层，2为中间，1为底层。

2.0 在EditorViewController.m里,设置底部主要按钮，用来控制边框，“九官格”像素变化，画板编辑等等

//声明属性放置的位置，在这里就不解释了。-(void)mainBtn
@property(nonatomic,strong)NSMutableArray *mainBtns;

//在- (void)viewDidLoad发送底部按钮关联方法消息。

- (void)viewDidLoad {

    [super viewDidLoad];

     上面的代码，省略.......

    //发送底部按钮关联方法消息

    [self mainBtn];

}

//设置主要按钮
//底部滚动框架关联方法，叠加view,显示底部按钮
-(void)mainBtn{
   self.mainBtns=[NSMutableArray array];
    //设置UIView，叠加层
    UIView *v=[[UIView alloc]initWithFrame:CGRectMake(0, 607, 375, 60)];
    v.backgroundColor=[UIColor clearColor];
    [self.view addSubview:v];
    //叠加图片
    UIImageView *iv=[[UIImageView alloc]initWithFrame:CGRectMake(0, 607, 375, 60)];
    iv.image=[UIImage imageNamed:@"pe_bg_three.png"];
    [self.view addSubview:iv];
    //叠加frame按钮,设置选中状态，添加按钮事件
    UIButton *frameBtn=[[UIButton alloc]initWithFrame:CGRectMake(0, 607, 125, 60)];
    [frameBtn setImage:[UIImage imageNamed:@"edit_frame.png"] forState:UIControlStateNormal];
    //按钮被选中状态改变它的图片（test）
    [frameBtn setImage:[UIImage imageNamed:@"edit_frame_h.png"] forState:UIControlStateSelected];
    frameBtn.tag=0;
    [self.view addSubview:frameBtn];
    [self.mainBtns addObject:frameBtn];
    [frameBtn addTarget:self action:@selector(mainBtnclicked:) forControlEvents:UIControlEventTouchUpInside];
    //叠加lomo按钮
    UIButton *lomoBtn=[[UIButton alloc]initWithFrame:CGRectMake(125, 607, 125, 60)];
    [lomoBtn setImage:[UIImage imageNamed:@"edit_lomo.png"]  forState:UIControlStateNormal];
    [lomoBtn setImage:[UIImage imageNamed:@"edit_lomo_h.png"] forState:UIControlStateSelected];
    lomoBtn.tag=1;
    [self.view addSubview:lomoBtn];
    [self.mainBtns addObject:lomoBtn];
    [lomoBtn addTarget:self action:@selector(mainBtnclicked:) forControlEvents:UIControlEventTouchUpInside];
    //叠加paint按钮
    UIButton *paintBtn=[[UIButton alloc]initWithFrame:CGRectMake(125*2, 607, 125, 60)];
    [paintBtn setImage:[UIImage imageNamed:@"edit_paint.png"]  forState:UIControlStateNormal];
    paintBtn.tag=2;
    [paintBtn setImage:[UIImage imageNamed:@"edit_paint_h.png"] forState:UIControlStateSelected];
    [self.view addSubview:paintBtn];
    [self.mainBtns addObject:paintBtn];
    [paintBtn addTarget:self action:@selector(mainBtnclicked:) forControlEvents:UIControlEventTouchUpInside];
}
//主要按钮点击事件
-(void)mainBtnclicked:(UIButton *)sender{
     //每次点击其他按钮 选中状态取消
    for (UIButton *btn in self.mainBtns) {
        if (![btn isEqual:sender]) {
            btn.selected=NO;
        }
    }
    sender.selected=!sender.selected;//保持不开启选中状态
    
    switch (sender.tag) {
        case 0://边框
            self.colorView.hidden=YES;
              self.paintView.hidden=YES;
            self.sizeView.hidden=YES;
            self.frameSV.hidden =!sender.selected;
            self.lomoSV.hidden=YES;
            
            break;
        case 1:
            self.paintView.hidden = YES;
            self.frameSV.hidden = YES;
            self.colorView.hidden=YES;
             self.sizeView.hidden=YES;
            self.lomoSV.hidden=!sender.selected;
            break;
        case 2:
           
            self.paintView.hidden =!sender.selected;
            self.previousBtn.selected=!sender.selected;
            self.resetBtn.selected=!sender.selected;
            self.colorBtn.selected=!sender.selected;
            self.penBtn.selected=!sender.selected;
            self.colorView.hidden=!sender.hidden;
             self.sizeView.hidden=!sender.hidden;
            
           self.lomoSV.hidden=YES;
           self.frameSV.hidden = YES;
             break;
    }
}

 

 

 

 2. 在EditorViewController.m里，代码实现小边框和大边框相连接，方法可任意放置位置

待续······