涂鸦

Main.storyboard

下面四个颜色设置在右边的view中background

ViewController.m

// ViewController.m

// 6A06.涂鸦

// Created by huan on 16/1/30.

#import "ViewController.h"

#import "CZPaintView.h"

#import "UIImage+CZ.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet CZPaintView *paintView;//画板

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

//1.拖一个view，用于画板

//2.监听触摸的事件，记录触摸的点

//3.根据触摸的点进行绘制

}

- (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

-(IBAction)back:(id)sender

{

[self.paintView back];

//1.将数组里最后一条“线”删除

//2. 重绘

}

-(IBAction)clean:(id)sender{

[self.paintView clear];

}

-(IBAction)save:(id)sender{

//将画板保存成一张图片

UIImage *captureImage = [UIImage captureImage:self.paintView];

NSData *imgData = UIImagePNGRepresentation(captureImage);

[imgData writeToFile:@"/Users/huan/Desktop/capture.png" atomically:YES];

}

-(IBAction)colorBtnClick:(UIButton *)sender{

//设置paintView当前颜色

self.paintView.currentColor = sender.backgroundColor;

NSLog(@"%s",__func__);

}

@end

CZPaintView.h

#import <UIKit/UIKit.h>

@interface CZPaintView : UIView

@property (nonatomic, strong) UIColor *currentColor;//当前选中的颜色

-(void)back;

-(void)clear;

@end

CZPaintView.m

// CZPaintView.m

// 6A06.涂鸦

// Created by huan on 16/1/30.

#import "CZPaintView.h"

@interface CZPaintView()

/**

* 存储“所有线”的点，数组里面存“一条线”的数组

@property (nonatomic, strong) NSMutableArray *pointOfAllLine;

@property (nonatomic, strong) NSMutableArray *pointOfLine;//一条线上的所有点

/**

* 存储线的颜色每一条对应里面一个元素

@property (nonatomic, strong) NSMutableArray *colorsOfAllLine;

@end

@implementation CZPaintView

-(NSMutableArray *)colorsOfAllLine{

if (!_colorsOfAllLine) {

_colorsOfAllLine = [NSMutableArray array];

}

return _colorsOfAllLine;

}

-(NSMutableArray *)pointOfAllLine{

if (!_pointOfAllLine) {

_pointOfAllLine = [NSMutableArray array];

}

return _pointOfAllLine;

}

//-(NSMutableArray *)pointOfLine{

// if (!_pointOfLine) {

// _pointOfLine = [NSMutableArray array];

// }

// return _pointOfLine;

//}

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect {

// Drawing code

//上下文

CGContextRef layerContext = UIGraphicsGetCurrentContext();

//设置线宽

CGContextSetLineWidth(layerContext, 3);

//设置首尾和接点的样式

CGContextSetLineCap(layerContext, kCGLineCapRound);

CGContextSetLineJoin(layerContext, kCGLineJoinRound);

//遍历点进行绘制

// NSInteger count = self.pointOfLine.count;

// for (NSInteger i = 0; i < count; i ++) {

// //获取点

// CGPoint position = [self.pointOfLine[i] CGPointValue];

// if (i == 0) {

// CGContextMoveToPoint(layerContext, position.x, position.y);

// }else{

// CGContextAddLineToPoint(layerContext, position.x, position.y);

// }

// //渲染

// CGContextStrokePath(layerContext);

//遍历多少条线

NSInteger lineCount = self.pointOfAllLine.count;

for (NSInteger i = 0; i < lineCount; i ++) {

//取出当前“一条线”的数组

NSArray *pointOfAline = self.pointOfAllLine[i];

//设置颜色

UIColor *lineColor = self.colorsOfAllLine[i];

[lineColor set];

//画线

//取出"线"的“点”的个数进行绘制

NSInteger pointsCount = pointOfAline.count;

for (NSInteger j = 0; j < pointsCount; j++) {

CGPoint point = [pointOfAline[j] CGPointValue];

if (j == 0) {

CGContextMoveToPoint(layerContext, point.x, point.y);

}else{

CGContextAddLineToPoint(layerContext, point.x, point.y);

}

//渲染

CGContextStrokePath(layerContext);

}

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

//创建一个数组,存放当前“一条线”的点

NSMutableArray *pointsOfAlline = [NSMutableArray array];

//添加到pointsOfAllLine

[self.pointOfAllLine addObject:pointsOfAlline];

//保存当前“一条线”的颜色

if (!self.currentColor) {//为空，给个默认的黑色

[self.colorsOfAllLine addObject:[UIColor blackColor]];

}else{

[self.colorsOfAllLine addObject:self.currentColor];

}

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

// 2.监听触摸的事件，记录触摸的点

//2.0 给一个属性保存所有线的点

//获取当前的位置

UITouch *touch = [touches anyObject];

CGPoint touchPoint = [touch locationInView:touch.view];

//2.1 获取当前 “一条线”数组添加点

NSMutableArray *pointsOfAline = [self.pointOfAllLine lastObject];

[pointsOfAline addObject:[NSValue valueWithCGPoint:touchPoint]];

// [self.pointOfLine addObject:[NSValue valueWithCGPoint:touchPoint]];

//3.根据触摸的点进行绘制

[self setNeedsDisplay];

}

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

NSLog(@"多少条线 %ld", self.pointOfAllLine.count);

}

-(void)back{

//1.将数组里最后一条“线”删除

[self.pointOfAllLine removeLastObject];

//2. 重绘

[self setNeedsDisplay];

}

-(void)clear{

//1.将数组里所有的“线”删除

[self.pointOfAllLine removeAllObjects];

//2. 重绘

[self setNeedsDisplay];

}

@end

UIImage + CZ.h

// UIImage+CZ.h

// B06.图片水印

// Created by Apple on 15/1/2.

#import <UIKit/UIKit.h>

@interface UIImage (CZ)

/**

* @param bgImageName 背景图片

* @param waterImageName 水印图片

* @param scale 图片生成的比例

* @return 添加了水印的背景图片

+(UIImage *)waterImageWithBgImageName:(NSString *)bgImageName waterImageName:(NSString *)waterImageName scale:(CGFloat)scale;

/**

* @param imageName 需要裁剪的图片

* @param borderColor 边框的颜色

* @param borderWidth 边框的宽度

* @return 一个裁剪带有边框的圆形图片

+(UIImage *)circleImageWithImageName:(NSString *)imageName borderColor:(UIColor *)borderColor borderWidth:(CGFloat)borderWidth;

/**

* @param captureView 需要裁图View

* @return 返回view的图片

+(UIImage *)captureImage:(UIView *)captureView;

@end

// UIImage+CZ.m

// B06.图片水印

// Created by Apple on 15/1/2.

#import "UIImage+CZ.h"

@implementation UIImage (CZ)

+(UIImage *)waterImageWithBgImageName:(NSString *)bgImageName waterImageName:(NSString *)waterImageName scale:(CGFloat)scale{

// 生成一张有水印的图片，一定要获取UIImage对象然后显示在imageView上

//创建一背景图片

UIImage *bgImage = [UIImage imageNamed:bgImageName];

//NSLog(@"bgImage Size: %@",NSStringFromCGSize(bgImage.size));

// 1.创建一个位图【图片】，开启位图上下文

// size:位图大小

// opaque: alpha通道 YES:不透明/ NO透明使用NO,生成的更清析

// scale 比例设置0.0为屏幕的比例

// scale 是用于获取生成图片大小比如位图大小：20X20 / 生成一张图片：（20 *scale X 20 *scale)

//NSLog(@"当前屏幕的比例 %f",[UIScreen mainScreen].scale);

UIGraphicsBeginImageContextWithOptions(bgImage.size, NO, scale);

// 2.画背景图

[bgImage drawInRect:CGRectMake(0, 0, bgImage.size.width, bgImage.size.height)];

// 3.画水印

// 算水印的位置和大小

// 一般会通过一个比例来缩小水印图片

UIImage *waterImage = [UIImage imageNamed:waterImageName];

#warning 水印的比例，根据需求而定

CGFloat waterScale = 0.4;

CGFloat waterW = waterImage.size.width * waterScale;

CGFloat waterH = waterImage.size.height * waterScale;

CGFloat waterX = bgImage.size.width - waterW;

CGFloat waterY = bgImage.size.height - waterH;

[waterImage drawInRect:CGRectMake(waterX, waterY, waterW, waterH)];

// 4.从位图上下文获取当前编辑的图片

UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

// 5.结束当前位置编辑

UIGraphicsEndImageContext();

return newImage;

}

+(UIImage *)circleImageWithImageName:(NSString *)imageName borderColor:(UIColor *)borderColor borderWidth:(CGFloat)borderWidth{

//需求：从位图上下文，裁剪图片[裁剪成圆形，也添加圆形的边框]，生成一张图片

// 获取要裁剪的图片

UIImage *img = [UIImage imageNamed:imageName];

CGRect imgRect = CGRectMake(0, 0, img.size.width, img.size.height);

// 1.开启位图上下文

UIGraphicsBeginImageContextWithOptions(img.size, NO, 0.0);

#warning 在自定义的view的drawRect方法里，调用UIGraphicsGetCurrentContext获取的上下文，是图层上下文(Layer Graphics Context)

// 1.1 获取位图上下文

CGContextRef bitmapContext = UIGraphicsGetCurrentContext();

// 2.往位图上下裁剪图片

// 2.1 指定一个圆形的路径，把圆形之外的剪切掉

CGContextAddEllipseInRect(bitmapContext, imgRect);

CGContextClip(bitmapContext);

// 2.2 添加图片

[img drawInRect:imgRect];

// 2.3 添加边框

// 设置边框的宽度

CGContextSetLineWidth(bitmapContext, borderWidth);

// 设置边框的颜色

[borderColor set];

CGContextAddEllipseInRect(bitmapContext, imgRect);

CGContextStrokePath(bitmapContext);

// 3.获取当前位图上下文的图片

UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

// 4.结束位图编辑

UIGraphicsEndImageContext();

return newImage;

}

+(UIImage *)captureImage:(UIView *)captureView{

//创建一个位图上下文

UIGraphicsBeginImageContext(captureView.bounds.size);

//把view渲染到位图上下文

[captureView.layer renderInContext:UIGraphicsGetCurrentContext()];

//获取图片

UIImage *captureImg = UIGraphicsGetImageFromCurrentImageContext();

//结束位图的编辑

UIGraphicsEndImageContext();

//返回

return captureImg;

}

@end

如果使用 UIBezierPath

不需要使用到上下文，内部实现(只有CZPaintView.m与上不同，其他相同)

// 1.拖一个view,用于画板

// 2.监听触摸的事件，记录触摸的点

// 3.根据触摸的点进行绘制

// CZPaintView.m

// A05.涂鸦

// Created by apple on 15-1-2.

#import "CZPaintView.h"

@interface CZPaintView()

/**

* 存放所有“线的路径”数组

@property (nonatomic, strong) NSMutableArray *linesPath;

@end

@implementation CZPaintView

-(NSMutableArray *)linesPath{

if (!_linesPath) {

_linesPath = [NSMutableArray array];

}

return _linesPath;

}

/**实现方法：使用UIBezierPath类

一条线就使用一个 UIBezierPath对象

*0. 需要一个数组存放UIBerzierPath 对象

*1. 监听move方法

*2. move方法里获取当前“点”添加到UIBezierPath对象

*3. 渲染

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect {

// Drawing code

#warning UIBezierPath 不需要使用到上下文，内部实现

//遍历所有path对象

NSInteger pathCount = self.linesPath.count;

for (NSInteger i = 0; i < pathCount; i++) {

//取path对象

UIBezierPath *path = self.linesPath[i];

//设置线宽、首尾样式、连接样式

path.lineWidth = 3;

path.lineCapStyle = kCGLineCapRound;

path.lineJoinStyle = kCGLineJoinRound;

//画

[path stroke];

}

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

//1.获取当前的点

UITouch *touch = [touches anyObject];

CGPoint touchPoint = [touch locationInView:touch.view];

//创建一个 UIBezierPath对象,添加到数组

UIBezierPath *linePath = [UIBezierPath bezierPath];

[self.linesPath addObject:linePath];

//设置path 起始点

[linePath moveToPoint:touchPoint];

[self.linesPath addObject:linePath];

}

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

//1.获取当前的点

UITouch *touch = [touches anyObject];

CGPoint touchPoint = [touch locationInView:touch.view];

//2.添加当前的“点” 到当前的 “线的路径”

UIBezierPath *currentLinepath = [self.linesPath lastObject];

[currentLinepath addLineToPoint:touchPoint];

//3.渲染

[self setNeedsDisplay];

}

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

}

-(void)back{

}

-(void)clear{

// 1.将数组里 "所有线" 删除

}

@end