文档章节

iOS --制作画板 --1

fengyun321
 fengyun321
发布于 2015/09/18 17:25
字数 961
阅读 231
收藏 0

制作画板

1,搭建界面

创建一个继承于UIView 的视图,就是画板视图,并导入到视图控制器来创建

再自定义一个工具栏的子视图,同样导入到视图控制器中使用

#import "ViewController.h"
#import "DrawView.h"
#define kwidth [UIScreen mainScreen].bounds.size.width

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //创建画板视图
    DrawView *drawView = [[DrawView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    drawView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:drawView];
    
    //创建灰色的工具栏视图
    ToolView *toolView = [[ToolView alloc]initWithFrame:CGRectMake(0, 20, kwidth, 110)];
    toolView.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:toolView];
    
    
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

自定义工具栏视图

定义的全局变量
    SelectButton *_LastButton;
    NSArray *_lineArray;
    UIView *_lineView;
    UIView *_colorView;

#import "ToolView.h"
#import "SelectButton.h"
#define kwidth [UIScreen mainScreen].bounds.size.width

@implementation ToolView

-(instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        [self creatSelectButton];
        [self creatColorView];
        [self creatLineWidthView];
    }
    return self;
}
//创建线宽的工具视图
- (void)creatLineWidthView
{
    _lineView = [[UIView alloc]initWithFrame:CGRectMake(0, 40, kwidth, 65)];
    [self addSubview:_lineView];
    
    _lineArray = @[@1,@3,@5,@8,@10,@15,@20];
    
    for (int i = 0; i < 7; i ++)
    {
        UIButton *lineButton = [UIButton buttonWithType:UIButtonTypeCustom];
        lineButton.frame = CGRectMake(i * (kwidth/7+8), 0, kwidth/7, 60);
        lineButton.tag = 200 + i;
        
        NSString *name = [NSString stringWithFormat:@"%@点",_lineArray[i]];
        [lineButton setTitle:name forState:UIControlStateNormal];
        [lineButton addTarget:self action:@selector(lineButtonAction:) forControlEvents:UIControlEventTouchUpInside];
        lineButton.tag = i;
        [_lineView addSubview:lineButton];
        _lineView.hidden = YES;
        
    }

}

//创建颜色的工具视图
- (void)creatColorView
{
    
    _colorView = [[UIView alloc]initWithFrame:CGRectMake(0, 40, kwidth, 65)];
    [self addSubview:_colorView];
    
    
    NSArray *colorArray = @[[UIColor darkGrayColor],[UIColor redColor],[UIColor greenColor],[UIColor blueColor],[UIColor yellowColor],[UIColor orangeColor],[UIColor purpleColor],[UIColor brownColor],[UIColor blackColor],[UIColor whiteColor]];
    
    for (int i = 0; i < 9; i ++)
    {
        UIButton *colorButton = [UIButton buttonWithType:UIButtonTypeCustom];
        colorButton.frame = CGRectMake(i * (kwidth/10+3), 0, kwidth/10, 60);
        colorButton.tag = 100 + i;
        colorButton.backgroundColor = colorArray[i];
        [colorButton addTarget:self action:@selector(colorButtonAction:) forControlEvents:UIControlEventTouchUpInside];
        [_colorView addSubview:colorButton];
        _colorView.hidden = YES;
    }

}

自定义上面的5个按钮(颜色,线宽,橡皮,撤销,清屏)

定义一个继承于UIControl的按钮

在他的drawRect方法中将字画上去

开放出三个属性

@property(nonatomic,strong)UIFont *font;//字体
@property(nonatomic,assign)BOOL isSelected;//是否被点击的开关
@property(nonatomic,copy)NSString *title;//名称

初始化属性并妇协set方法

-(instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        //设置默认值
        _title = @"这是一个字符串";
        _isSelected = NO;
        _font = [UIFont systemFontOfSize:17];
        
    }
    return self;
}
-(void)setFont:(UIFont *)font
{
    _font = font;
    [self setNeedsDisplay];
}
- (void)setTitle:(NSString *)title
{
    _title = title;
    [self setNeedsDisplay];

}
- (void)setIsSelected:(BOOL)isSelected
{
    _isSelected = isSelected;
    [self setNeedsDisplay];

}

复写drawRect方法

- (void)drawRect:(CGRect)rect {

    NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc]init];
    style.alignment = NSTextAlignmentCenter;
    NSDictionary *dic = @{NSFontAttributeName :_font,
                          NSParagraphStyleAttributeName:style
                          };
    rect.origin.y += 10;
    [_title drawInRect:rect withAttributes:dic];
    if (_isSelected)
    {
        //绘制线条
      CGRect frame =  CGRectMake(0, rect.size.height-2, rect.size.width, 2);
        [[UIColor redColor]set];
        UIRectFill(frame);
    }
    

}

再到ToolView中将自定义的按钮视图添加到他的父视图上

- (void)creatSelectButton
{
    NSArray *titleArray = @[@"颜色",@"线宽",@"橡皮",@"撤销",@"清屏",];
    for (int i = 0; i < 5; i ++)
    {
        CGFloat width = kwidth/5;
        SelectButton *selectButton = [[SelectButton alloc]initWithFrame:CGRectMake(i * width, 0, width, 40)];
        selectButton.backgroundColor = [UIColor lightGrayColor];
        [self addSubview:selectButton];
        
        selectButton.title = titleArray[i];
        selectButton.tag = i;
        [selectButton addTarget:self action:@selector(selectButtonAction:) forControlEvents:UIControlEventTouchUpInside];
        
    }
}

此时界面搭建完成

2,传递绘图的数据使用block

在ToolView的.h文件中定义block并创建属性

typedef void(^ColorBlock)(UIColor *color);
typedef void(^LineWidthBlock)(CGFloat lineWidth);
typedef void(^SelectBlock)(void);

@class SelectButton;

@interface ToolView : UIView
{
    SelectButton *_LastButton;
    NSArray *_lineArray;
    UIView *_lineView;
    UIView *_colorView;
    
    
    ColorBlock _colorBlock;
    LineWidthBlock _lineWidthBlock;
    SelectBlock _selectEraser;
    SelectBlock _selectUndo;
    SelectBlock _selectClear;

   
}

- (void)creatColorBlock:(ColorBlock)colorBlock
     withLineWidthBlock:(LineWidthBlock)lineWidth
       withSelectEraser:(SelectBlock)selectEraser
    withSelectUndoBlock:(SelectBlock)selectUndo
   withSelectClearBlock:(SelectBlock)selectClear;


@end

在ToolView的.m文件中实现block的传递,调用

- (void)creatColorBlock:(ColorBlock)colorBlock
     withLineWidthBlock:(LineWidthBlock)lineWidth
       withSelectEraser:(SelectBlock)selectEraser
    withSelectUndoBlock:(SelectBlock)selectUndo
   withSelectClearBlock:(SelectBlock)selectClear
{
    _colorBlock = colorBlock;
    _lineWidthBlock = lineWidth;
    _selectEraser = selectEraser;
    _selectUndo = selectUndo;
    _selectClear = selectClear;
}






- (void)selectButtonAction:(SelectButton *)button
{
    _LastButton.isSelected = NO;
    button.isSelected = YES;
    _LastButton = button;
    switch (button.tag)
    {
        case 0:
            //选择颜色视图
            _colorView.hidden = NO;
            _lineView.hidden = YES;
            
            break;
        case 1:
            //选择线宽视图
            
            _colorView.hidden = YES;
            _lineView.hidden = NO;
            
            break;
        case 2:
            //选择橡皮视图

            _selectEraser();
            break;

        case 3:
            //选择撤销视图
            _selectUndo();
            
            break;

        case 4:
            //选择线宽视图
            _selectClear();
            break;
        default:
            break;
    }

    
}

- (void)colorButtonAction:(UIButton *)button
{
    UIColor *color = button.backgroundColor;
    if (_colorBlock!=nil)
    {
        _colorBlock(color);

    }

}
- (void)lineButtonAction:(UIButton *)button
{
  NSNumber *number =  _lineArray[button.tag];
    CGFloat lineWidth = [number floatValue];

    if (_lineWidthBlock!=nil)
    {
        _lineWidthBlock(lineWidth);
    }
    
}

在视图控制器中进行传值,将block中的属性传递给drawView

    //传递block,给drawView里的属性赋值
    [toolView creatColorBlock:^(UIColor *color) {
        //传递颜色
        drawView.color = color;
        
    } withLineWidthBlock:^(CGFloat lineWidth) {
        //传递线宽
        drawView.lineWidth = lineWidth;
        
    } withSelectEraser:^{
        //选择橡皮
        drawView.color = [UIColor whiteColor];
        drawView.lineWidth = 20;
    
    } withSelectUndoBlock:^{

        //撤销
        [drawView undo];
        
    } withSelectClearBlock:^{
        //清屏
        [drawView clear];
    }];



© 著作权归作者所有

fengyun321
粉丝 3
博文 31
码字总数 16462
作品 0
海淀
程序员
私信 提问
加载中

评论(1)

吴_钟鸿
吴_钟鸿
博主,可以把绘图的demo发给我看下吗?qq邮箱 421151849@qq.com 最近在研究绘图 谢谢了
iOS的绘图机制-iOS,iPad,iPhone,Objective-c

嘿!我又回来了。 在前面我介绍了iOS的视图机制,我也提到了iOS的视图框框可以通过drawRect自己绘图,我也说过每个view的layer(CALayer)就像一个视图的投影,其实我们也可以来操作它定制一...

晨曦之光
2012/05/28
2.9K
0
iOS超级签名的原理及实现过程

iOS超级签名简单概括就是把udid安装方式实现了自动化。 类似于下面这个真机调试教程的过程,实现了自动化! iOS APP真机调试测试教程 苹果开发者个人账号及公司账号都可以用来制作iOS超级签名...

qtb999
07/26
253
3
10个优秀Objective-C和iOS开发在线视频教程

如果你自己开发iOS应用,你肯定会发现网上有很多资源。学习编程的一个最好的方法就是自己写代码,而开始写代码的最快的方式就是看其他人怎么写。我们从海量视频和学习网站中整理出了我们认为...

mingxun
2014/05/09
203
0
iOS的绘图机制二 - iOS,iPad,iPhone,Objective-c

在iOS的绘图机制那篇文章中,我说了很多大道理,现在我觉得应该摆上台来说程序本身的主题了。当说完程序本身的主题,我再引入绘图如何去定制我们的视图(UIView),估计大家就会和我一样收获...

晨曦之光
2012/05/28
619
0
【送钱项目】简单的IOS应用制作,寻找在上海的IOS开发者

【送钱项目】简单的IOS应用制作,寻找在上海的IOS开发者 我们有现成的网站,软件内的数据一律我们做好接口,你们直接调用即可,这个可以说是送钱的项目,人在上海的,有IOS开发经验的开发者请...

sunway123
2014/06/12
85
2

没有更多内容

加载失败,请刷新页面

加载更多

PhotoShop 色调:理解直方图/RGB通道信息

一、直方图:图表的形式,展示图像像素分布的情况 1.平均值:表示平均亮度 2.标准偏差值:表示亮度值范围内的中间值 3.像素: 表示用于计算直方图的像素总数 4.色阶:显示指针下面的区域亮度...

东方墨天
30分钟前
6
0
wildfly(JBoss AS)应用服务器快速入门

什么是wildfly JBoss AS 从8版本起名为wildfly。Wildfly是一个开源的基于JavaEE的轻量级应用服务器。可以在任何商业应用中免费使用。 WildFly是一个灵活的、轻量的、强大管理能力的应用程序服...

程序新视界
55分钟前
5
0
Java集合类常见面试知识点总结

Java集合类学习总结 这篇总结是基于之前博客内容的一个整理和回顾。 这里先简单地总结一下,更多详细内容请参考我的专栏:深入浅出Java核心技术 https://blog.csdn.net/column/details/21930...

Java技术江湖
58分钟前
6
0
怎么用for循环打出爱心

先上效果图: 这是用*组成的爱心,下面讲讲思路: 首先这个图形可以拆分成三部分:第一部分是上面三行的两个梯形,第二部分是中间三行的长方形,第三部分是最下面的倒三角形。 其实图形拆分好...

INEVITABLE
今天
4
0
用HttpUrlConnection伪造成HttpClient

https://www.jianshu.com/p/27ad06cc39d2

shzwork
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部