IOS 绘制画画板(封装上下文)
封装上下文
UIImage (CaptureView).h / .m
@interface UIImage (CaptureView) + (UIImage *)captureImageWithView:(UIView *)view;
@end
#import "UIImage+captureView.h" @implementation UIImage (CaptureView) + (UIImage *)captureImageWithView:(UIView *)view
{
// 1.创建bitmap上下文
UIGraphicsBeginImageContext(view.frame.size);
// 2.将要保存的view的layer绘制到bitmap上下文中
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
// 3.取出绘制号的图片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
return newImage;
} @end
画画板
NJView.h / .m
@interface NJView : UIView - (void)clearView;
- (void)backView;
@end
#import "NJView.h" @interface NJView () @property (nonatomic, strong) NSMutableArray *paths; @end @implementation NJView - (NSMutableArray *)paths
{
if (_paths == nil) {
_paths = [NSMutableArray array];
}
return _paths;
} // 开始触摸
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{ // 1.获取手指对应UITouch对象
UITouch *touch = [touches anyObject];
// 2.通过UITouch对象获取手指触摸的位置
CGPoint startPoint = [touch locationInView:touch.view]; // 3.当用户手指按下的时候创建一条路径
UIBezierPath *path = [UIBezierPath bezierPath];
// 3.1设置路径的相关属性
[path setLineJoinStyle:kCGLineJoinRound];
[path setLineCapStyle:kCGLineCapRound];
[path setLineWidth:]; // 4.设置当前路径的起点
[path moveToPoint:startPoint];
// 5.将路径添加到数组中
[self.paths addObject:path]; }
// 移动
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
// 1.获取手指对应UITouch对象
UITouch *touch = [touches anyObject];
// 2.通过UITouch对象获取手指触摸的位置
CGPoint movePoint = [touch locationInView:touch.view]; // 3.取出当前的path
UIBezierPath *currentPaht = [self.paths lastObject];
// 4.设置当前路径的终点
[currentPaht addLineToPoint:movePoint]; // 6.调用drawRect方法重回视图
[self setNeedsDisplay]; } // 离开view(停止触摸)
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{ [self touchesMoved:touches withEvent:event];
/*
// 1.获取手指对应UITouch对象
UITouch *touch = [touches anyObject];
// 2.通过UITouch对象获取手指触摸的位置
CGPoint endPoint = [touch locationInView:touch.view]; // 3.取出当前的path
UIBezierPath *currentPaht = [self.paths lastObject];
// 4.设置当前路径的终点
[currentPaht addLineToPoint:endPoint]; // 6.调用drawRect方法重回视图
[self setNeedsDisplay];
*/ } // 画线
- (void)drawRect:(CGRect)rect
{ [[UIColor redColor] set];
// 边路数组绘制所有的线段
for (UIBezierPath *path in self.paths) {
[path stroke];
} } - (void)test
{
/*
// 1.创建一条路径
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 20, 20);
CGPathAddLineToPoint(path, NULL, 100, 100); CGMutablePathRef path2 = CGPathCreateMutable();
CGPathMoveToPoint(path2, NULL, 120, 120);
CGPathAddLineToPoint(path2, NULL, 200, 200); CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.将路径添加到上下文中
CGContextAddPath(ctx, path);
CGContextAddPath(ctx, path2); // 3.渲染
CGContextStrokePath(ctx);
*/ /*
// UIBezierPath == CGMutablePathRef // 1.创建一条路径
UIBezierPath *path = [UIBezierPath bezierPath];
// 2.给路径设置起点和重点
[path moveToPoint:CGPointMake(20, 20)];
[path addLineToPoint:CGPointMake(100, 100)]; [path setLineCapStyle:kCGLineCapRound];
[path setLineWidth:10];
[path setLineJoinStyle:kCGLineJoinRound]; // 3.渲染路径
[path stroke]; // 1.创建一条路径
UIBezierPath *path2 = [UIBezierPath bezierPath];
// 2.给路径设置起点和重点
[path2 moveToPoint:CGPointMake(120, 120)];
[path2 addLineToPoint:CGPointMake(200, 200)]; [path2 stroke];
*/
} - (void)clearView
{
[self.paths removeAllObjects];
[self setNeedsDisplay];
}
- (void)backView
{
[self.paths removeLastObject];
[self setNeedsDisplay];
}
调用画画板到控制器
@interface NJViewController ()
/**
* 清屏
*/
- (IBAction)clearBtnClick;
/**
* 回退
*/
- (IBAction)backBtnClick;
/**
* 保存
*/
- (IBAction)saveBtnClick; @property (weak, nonatomic) IBOutlet NJView *customView;
@end @implementation NJViewController
- (IBAction)clearBtnClick {
[self.customView clearView];
} - (IBAction)backBtnClick { [self.customView backView];
} - (IBAction)saveBtnClick { UIImage *newImage = [UIImage captureImageWithView:self.customView];
// 4.保存到相册
UIImageWriteToSavedPhotosAlbum(newImage, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
} - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
{
if (error) {
[MBProgressHUD showError:@"保存失败"];
}else
{
[MBProgressHUD showSuccess:@"保存成功"];
}
}
@end
IOS 绘制画画板(封装上下文)的更多相关文章
- iOS 使用UIBezierPath类实现随手画画板
在上一篇文章中我介绍了 UIBezierPath类 介绍 ,下面这篇文章介绍一下如何通过这个类实现一个简单的随手画画板的简单程序demo,功能包括:划线(可以调整线条粗细,颜色),撤销笔画,回撤笔画, ...
- iOS - Quartz 2D 画板绘制
1.绘制画板 1.1 绘制简单画板 PaintBoardView.h @interface PaintBoardView : UIView @end PaintBoardView.m @interfa ...
- IOS 绘制基本图形(画文字、图片水印)
- (void)drawRect:(CGRect)rect { // Drawing code // [self test]; // 1.加载图片到内存中 UIImage *image = [UIIm ...
- IOS 绘制基本图形( 画圆、画线、画圆弧、绘制三角形、绘制四边形)
// 当自定义view第一次显示出来的时候就会调用drawRect方法- (void)drawRect:(CGRect)rect { // 1.获取上下文 CGContextRef ctx = UIG ...
- iOS_24_画画板(含取色板)
终于效果例如以下: 一.简单说明 1.使用一个数组 strokesArr(笔画数组)记录全部笔画.数组中保存的是一个个的笔画字典,一个字典就是一个笔画.笔画字典中有三项:笔画的大小.颜色.points ...
- android96 内存创建图片副本,画画板
package com.itheima.copy; import android.os.Bundle; import android.app.Activity; import android.grap ...
- Android简单开发的画画板
Android开发画画板要考虑得几个问题如下: 1 屏幕画板.画笔如何绘制问题 2 用户手指触摸屏幕画板监听事件,以及对应的几种状态处理问题 3 保存图片到SD卡,以及在系统相册打开时自动加载刚才的 ...
- Android简易实战教程--第二十四话《画画板》
今天完成一个画画板. 首先来个布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android ...
- canvas画画板,canvas画五角星,canvas制作钟表、Konva写钟表
制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...
随机推荐
- Java中的进制
byte bt = (byte) 254; System.out.println("bt = "+bt); /** * 之所以做这个与运算是为了把高位的数据去掉,准确的说是高位的1 ...
- laravel5.4 正式环境 linux 下出现undefined code
1.laravel5.4 正式环境 linux 下出现undefined code问题 报错位置在:登录模块中login 引用 报$_SESSION['code'] 中的code 并未定义 原因: ...
- PM2使用文档
简介 PM2是node进程管理工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控.自动重启.负载均衡等,而且使用非常简单. 下面就对PM2进行入门性的介绍,基本涵盖了PM2的常用的功能和 ...
- .frm和.ibd恢复数据
昨日晚上开发告诉我不小心truncate两个表的数据,要求还原.结果在阿里云上找到了备份内容,结果是物理备份文件.frm..ibd.心中一万个草泥马啊..没办法,开始还原吧. 1.查看测试机Mysql ...
- DataGridView控件对Column的设置
http://stackoverflow.com/questions/18666582/datagridview-autofit-and-fill 1.Column覆盖所有width: dgv.Aut ...
- JavaScript和jquery中的宽度
Javascript: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document ...
- Javascript专题(三)c.各种轮播--上下滚动轮播(面向对象版本)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- springMvc json 参数
以前,一直以为在SpringMVC环境中,@RequestBody接收的是一个Json对象,一直在调试代码都没有成功,后来发现,其实 @RequestBody接收的是一个Json对象的字符串,而不是一 ...
- 用POST方法上传文件
文件上传分为客户端和服务器端 客户端可以通过form表单进行上传 客户端使用html表单进行上传 enctype = "multipart/form-data"用来指定表单编码数据 ...
- Django基础(2)--模板自定义标签和过滤器,模板继承 (extend),Django的模型层-ORM简介
没整理完 昨日回顾: 视图函数: request对象 request.path 请求路径 request.GET GET请求数据 QueryDict {} request.POST POST请求数据 ...