1> Quartz2D简介
* PPT简介
什么是Quartz2D?二维的绘图引擎
什么是二维?平面
什么是引擎?经包装的函数库,方便开发者使用。也就是说苹果帮我们封装了一套绘图的函数库
同时支持iOS和Mac系统什么意思?用Quartz2D写的同一份代码,既可以运行在iphone上又可以运行在mac上,可以跨平台开发。
开发中比较常用的是截屏/裁剪/自定义UI控件。
Quartz2D在iOS开发中的价值就是自定义UI控件。
图形上下文的数据类型和作用。
有多少种上下文。
自定义控件的步骤。
为什么要实现drawRect:方法,因为只有在drawRect:方法中才能获取到上下文
2> Quartz2D绘图演练
在哪画? storyboard拖一个view,在这个view里面画一些东西。
自定义view:需要绘图,就必须重写drawRect:方法
* HMLineView:绘制线段 必须画图分析
drawRect:方法自动生成,意味着什么?这个方法很重要。
1> 什么时候调用:视图要显示的时候,才会调用,viewDidLoad后才会调用,因为那时候还没显示视图。
2> 作用:用来绘图
* 画一条线
1> 获取图形上下文
CG:表示这个类在CoreGraphics框架里 Ref:引用
目前学的上下文都跟UIGraphics有关,想获取图形上下文,首先敲UIGraphics。
2> 拼接路径:一般开发中用贝塞尔路径,里面封装了很多东西,可以帮我画一些基本的线段,矩形,圆等等。
创建贝塞尔路径
起点:moveToPoint
终点:addLineToPoint
3> 把路径添加到上下文
CGPath转换:UIKit框架转CoreGraphics直接CGPath就能转
4> 把上下文渲染到视图,图形上下文本身不具备显示功能。
PPT画图分析为什么要这样做?首先获取图形上下文,然后描述路径,把路径添加到上下文,渲染到视图,图形上下文相当于一个内存缓存区,在内存里面操作是最快的,比直接在界面操作快多了。
* 在添加一根线
直接addLineToPoint,因为路径是拼接的,默认下一条线的起点是上一条线的终点。
* 画两跟不连接的线
1> 第二次画的时候,重新设置起点,然后画线。一个路径可以包含多条线段。
2> 新创建一个路径,添加到上下文。开发中建议使用这种,比较容易控制每根线。
* 设置绘图状态
线段怎么加粗。
绘图状态调用顺序:只要在渲染之前就好了,在渲染的时候才会去看绘图的最终状态。
* 画曲线
PPT分析:3个点,起点,终点,控制点。
* HMShapeView:绘制图形
* triangle三角形(画图分析)
* 关闭路径closePath:从路径的终点连接到起点
* 填充路径CGContextFillPath:有了封闭的路径就能填充。
* 设置填充颜色 [[UIColor blueColor] setFill];
* 设置描边颜色 [[UIColor redColor] setStroke];
* 不显示描边颜色,为什么?没有设置线宽
* 设置线宽,还是不显示,为什么?因为绘制路径不对。
* 即填充又描边CGContextDrawPath:kCGPathFillStroke。
* rectangle矩形
* circle圆:为什么传入矩形,因为圆内切与矩形
* arc圆弧
PPT分析:
1> 圆弧属于圆的一部分,因此先要有圆,才有弧。
2> 圆需要起点吗?画线需要,圆也不另外。
3> 起点在哪? 圆心右边
4> 画圆弧还需要起始角度,结束角度,方向,角度必须是弧度
* Quarter 1/4圆
* 画个1/4圆弧,Stroke
* 填充路径,Fill
* 必须有封闭路径才能填充,没有封闭路径,系统会自动关闭路径,再去填充
* 画线连接圆心,自动关闭路径。
2.1基本图形绘制:
先画PPT在写代码
讲解顺序: 绘制线段(Line):绘制直线->在添加一条直线->绘制两条直线(路径填充、设置路径属性,颜色,线宽等)->曲线->分析
讲解顺序: 绘制图形(Shape):绘制三角形(超人内裤)->矩形->圆->圆弧->1/4圆
3> 重绘-下载进度条(setNeedsDisplay) 必须画图分析
* 分析有几个控件:UISliderView,自定义view用来画图,UILabel
* 分析思路:滑动UISliderView的时候,把UISliderView的值传给自定义view,改变的显示。
* 怎么监听UISliderView,valueChange事件
* 自定义view搞一个属性接收滑动的值
* 接下来先搞label,因为他比较简单,做东西,先从简单的着手。
* 懒加载label,位置居中,文字居中
* label怎么显示?重写progress的set方法,有数据就展示在label上。
* 绘制圆弧,PPT分析,从哪开始画圆弧。
* 每次转多少°? 角度 = 进度 * M_PI * 2
* startAngle = -M_PI_2
* endAngle = -M_PI_2 + 进度 * M_PI * 2
* 不会及时更新视图显示?为什么,因为drawRect只会在视图显示的时候调用一次。
* 怎么重绘?
* 手动调用drawRect方法,不行,因为你自己不能创建上下文,必须系统调用来调用
* setNeedsDisplay:在view上做一个重绘的标记,在下一次绘图的周期来临,就会先创建好上下文,然后自动调用drawRect重绘。
4>绘制饼图
* PPT分析 -> 找规律 -> 得出startA,endA,angle的结论
* startA = endA angle = 比例 * 总度数360° endA = startA + angle
* angle = 自己 / 100.0 * 360
* 一个一个扇形画
5>绘制柱状图
* PPT分析 -> 找规律 -> 得出w,h,y,x的结论
* w = viewW / (2 * count - 1)
* h = viewH * 比例
6> UIKit封装绘图方法演练(不需要上下文)
6.0 绘制文本
6.1 绘制矩形
6.2 绘制图像
6.3图像裁切 -> 指定裁切区域之后,所有绘图信息都只显示裁切区域内
7> 模仿UIImageView/雪花(定时器)
8>图形上下文栈
9> 矩阵变换
============
============
1> 水印PPT简介
* 图片水印作用:防止他人盗取图片,加一些Logo,生成一张新的图片。
* 怎么生成新的图片?和绘图一样的,需要拿到上下文做事情,这里也需要拿到上下文,生成一个新的图片。
* 什么上下文?位图上下文,在这个上下文画东西,就能输出到新的图片上。
* 怎么获取?之前用的都是图层上下文,系统会自动创建,但是我们位图上下文,需要我们手动创建
* 总结:只要不和view有关系的上下文,都需要我们手动创建。
* 在哪获取图像上下文,viewDidLoad, 不需要拿到系统创建的图层上下文,没必要在drawRect方法里写,直接viewDidLoad就行了。
* 怎么创建图像上下文了?之前说过跟上下文有关的以什么开头,UIGraphics
* UIGraphicsBeginImageContextWithOptions:看注释,create bitmap,创建一个位图上下文,而且这种方法得到的图片最清晰。
* 解释参数(size:新图片尺寸 opaque: YES:不透明 NO:透明 scale:0.0 不伸缩)
* 绘制内容(图片,文字)
* 获取图片:把位图上下文的内容生成一个图片给你。
* 关闭上下文,不关闭一直占用着内存。
* 显示UIImageView上
* 保存图片,写到文件,UIImage不能写,需要转换成NSData二进制数据
* UIImageJPEGRepresentation:可以设置图片质量
* UIImagePNGRepresentation:把图片转换成png格式的二进制数据,png格式默认是最高清的。
* 写到桌面
2> 图片裁剪PPT简介
*图片裁剪
* PPT分析思路:先设置裁剪区域,把图片画上去,超出裁剪区域的自动裁剪掉。
* 加载旧图片,根据旧图片,获取上下文尺寸。
* 上下文的尺寸 = 新图片的尺寸
* 开启一个多大的上下文?:和图片尺寸一样大,避免压缩图片。如果比图片尺寸小,会压缩图片。
* 设置裁剪区域:正切于图片的圆
* 绘制旧图片
* 获取新图片
* 关闭上下文
* 带圆环裁剪:在裁剪的图片外边加个小圆环。
* PPT分析思路:先画一个大圆,在设置裁剪区域,把图片画上去,超出裁剪区域的自动裁剪掉。
* 加载旧图片,根据旧图片,获取上下文尺寸。
* 确定圆环宽度 borderW
* 上下文的尺寸 = 新图片的尺寸
* 确定新的上下文尺寸: newImageW : oldImageW + 2 * borderW newImageH : oldImageH + 2 * borderW,
* 绘制大圆:
1.获取上下文 2.添加路径到上下文 3.设置大圆的颜色 = 圆环的颜色 4.渲染
* 设置裁剪区域,和图片尺寸一样大,只不过,x,y不一样,x=borderW,y=borderW.
* 绘制旧图片
* 获取新图片
* 关闭上下文
* 抽分类,3个参数,图片名称,圆环宽度,圆环颜色
3> 屏幕截图简介
* 屏幕截图:把屏幕的内容截屏生成一张新的图片
* 通常开发中,都是把控制器的内容截屏,生成新的图片
* 控制器怎么显示?根据view
* view怎么显示? 根据layer图层
* 把layer渲染到位图上下文
* 注意:图层只能用渲染,图片和文字可以用draw
* 渲染在哪?新的图片
* 开启图片上下文,和视图一样的尺寸
* 写入桌面
* 抽分类
4> 手势解锁
* 演示实例程序
* 分析界面有几个控件:背景:UIImageView 白色圆圈:按钮(点击他,会出现另外一种图片,按钮可以设置不同状态下的图片。)单独视图:(画线是有范围的,当超出view就不能画线了)
* HMLoadView:自定义视图,在视图一创建的时候,就添加9个按钮。
* 在initWithCoder,initWithFrame方法添加按钮。
* 九宫格布局:
tolcol = 3
计算row,col 按钮的x,y跟col,row有关系,col = i % tolcol row = i / tolcol
计算边距 margin = (view.bounds.size.width - tolcol * btnW) / (tolcol + 1)
btnX = margin + (btnW + margin) * col
btnY = (btnW + margin) * row
* 圆的选中
* 点击按钮就为选中的图片怎么做?监听按钮点击。
* 不能addTarget: 不能及时显示选中图片。
* 监听touchBegin,判断点在不在按钮的frame上。
* touchBegin不调用?原因:事件交给按钮处理,应该把事件交给解锁视图。让按钮不接收事件。
* 设置按钮不允许交互,2个用处:1.不接收事件 2.取消高亮效果 一举两得
* 遍历所有按钮,看触摸点在哪个按钮上,就选中谁,CGRectContainsPoint 传入的参数必须是同一个坐标系
* 实现touchMove方法:因为手指移动的时候,也需要判断点在不在按钮上。
* 抽方法,因为touchMove的方法里,也需要做同样的事情。
1> pointWithTouches 根据touches集合取出触摸点
2> buttonWithPoint 根据触摸点,获取触摸按钮
* 圆的连线
* 哪些需要连线?被选中按钮之间都需要连线,还有一个多余的线
* 先把选中的按钮全部连线?为什么,因为多余的那根线是从最后一个按钮的圆心开始画,手指移动在哪就画哪。
* 搞个数组保存下所有选中按钮,在drawRect方法中遍历所有按钮,连线
* UIBezierPath画线,不需要上下文。
* 需要多少个UIBezierPath对象?一个,路径都是连续的,不相连的,才需要创建新的UIBezierPath。
* 遍历数组,描述路径
1> 起点:第一个按钮的圆心
2> 添加一根线到其他按钮的圆心
* 设置路径的颜色和线宽
* 什么时候渲染?把所有路径都描述完就,渲染一次就够了。
* [path stroke] 就能渲染到视图上了。
* 画多余的那根线,记住手指移动的位置。
* setNeedDisplay 没有画出来线?因为drawRect只会调用一次,需要每次手指移动的时候,都需要重绘。
* touchBegin不调用setNeedDisplay?那时候重绘也没用,只有起点。
* lineJoinStyle:有尖尖的东西,线段连接样式的问题,设置为平的。
* 已经选中的按钮,不需要再次选中,和画线
* 手指抬起,取消所有选中按钮,并且清空数组,清空线条
* drawRect判断下没有选中数组,不需要画线。
* 如何判断用户是否输入正确?给选中按钮绑定tag,遍历所有选中按钮,把tag拼接成一个字符串。
5> 画板
演示程序:
分析控件:ToolBar(不需要管里面子控件的frame),画板view,自定义工具条(方便屏幕适配,能迅速固定里面子控件的位置)
自动布局,四个约束确定一个控件
蓝色按钮:左,右,下,高固定
橘色按钮:右,下固定,宽度和高度和蓝色按钮相等。
绿色按钮:右,下,宽度和高度和橘色按钮相等
绘图思路:先描述路径,在渲染,需要画很多线条,最好每个线条保存到一个路径里面。
绘图功能:
* touchBegin设置画线起点:开始触摸的点
* 怎么设置起点?创建UIBezierPath,贝塞尔路径才能设置起点
* touchMove:手指移动到哪就画哪,addLine到移动的点
* setNeedDisplay,路径描述完了,就渲染到视图就好了。
* 只能画一条线?drawRect方法每次都会把之前的清掉,重新绘制
* 怎么绘制多条路径?搞个数组保存上一次的
* 设置线宽:每次滑动滑块,就改变下一次路径的宽度
* 监听滑块的值,把值传递给paintView,设置路径的线宽。
* 不能在drawRect写,会导致所有路径都是一个线宽,应该是每个路径都记录自己的线宽,而且线宽只需要设置一次,在路径一创建的时候就设置。
* 设置颜色:
* 自定义UIBezierPath,保存颜色,实现一条路径对应一个颜色
辅助功能:
* 清屏:清空所有路径数组
* 撤销:移除最后一条路径
* 橡皮擦:设置画笔为白色
* 保存:
1> 把画板内容截屏
2> 把图片保存到相册 UIImageWriteToSavedPhotosAlbum
3> 保存相册的回调方法不能乱写,必须按照规定 image:didFinishSavingWithError:contextInfo:
* 照片选择
1> 通常都是去相册里去照片
2> UIImagePickerController,就可以去手机相册了
3> 用Modal,没有导航控制器,不能push
4> 设置代理,获取图片
5> 把图片传递给paintView
6> 添加到路径,然后重绘。:画图片也需要顺序的
* 照片处理
1> PPT画思路:搞一个和画板一样的透明view,里面搞个UIImageView来显示我们从照片库选择的图片,然后对UIImageView进行旋转,缩放等操作
2> UImageView不能放在layoutSubViews里面设置尺寸,因为要设置他的形变,默认会调用他父类的layoutSubViews,导致一些莫名其妙的原因
3> 在传图片的时候设置他的尺寸,和位置,让他和图片一样的尺寸,显示在中间
4> 长按操作:在长按结束的时候,做操作
1.默认高亮状态,先变浅在恢复,设置alpha
2.动画结束后,把自己截屏,传给控制器里,在交给paintView显示
3.需要移除父视图,使命完成了,而且不移除,不能绘制东西,永远添加到paintView上面