day14
分享两个网站 Code4app.com论坛 和Stackverflow.com编码论坛(需要FQ)
回顾：
UICollectionViewController
两个自定义:
1.单元格的自定义-----继承自UICollectionViewCell
2.布局的自定义-------继承自UICollectionViewLayout或者UICollectionViewFlowLayout
MVC：
Model：数据模型 存储数据 网络数据的获取 数据库操作 文件的读取
Controller：控制器
View：视图层
1.绘图 2.贴图 3.手势 4.变形 5.布局 6.动画 7.动力 8.特效
今天：绘图
1.1 基本概念：
屏幕：有很多的晶体做成的，分辨率：1920*1080 一行有1920个晶体 一共有1080行，每一个晶体发三种颜色的光（red green blue）
图片：
点阵图：一堆点，每一个点是一个颜色，图片的分辨率就是存储图片点的个数。图片中的每个点都是4个整数来存储的，这四个整数分别对应该点的red（0-255）green（0-255）blue（0-255） alpha透明度。一个点就需要4个字节来存储，依据这个规律就可以计算图片的大小了。但是为了压缩图片的大小，将一个点周围的四个点计算一个平均值，用这个点来代替四个点
矢量图：存储的是生成图形所经过计算的数学公式
2.OC对象与图像的转换
内存中的OC对象，会基于系统提供的默认的规则，绘制成平面图形后显示到屏幕上
绘制的过程基本是底层的CoreGraphics这一组C语言的API实现的
系统会为编程人员提供一个可以编程的接口，在指定的位置添加绘制代码后，就可以让系统在原有绘制的基础上增加自定义的绘制内容。
3.绘图的实现：
步骤：
1.重写UIView的RrawRect方法，该方法有系统自动调用，不能自己动手调用，因为DrawRect方法只是系统统一整套绘制流程中的一个小环节。
2.获取绘制的上下文对象
CGContextRefcontext=UIGraphicsGetCurrentContext();
3.设置上下文对象的绘制起点
CGContextMoveToPoint(context,40, 40);
4.添加绘制路径
CGContextMoveToPoint(context,40, 40);
CGContextAddLineToPoint(context, 40, 140);
CGContextAddLineToPoint(context, 140, 40);
CGContextAddLineToPoint(context, 40, 40);
5.设置描述或者填充的颜色
//设置描边的颜色
CGContextSetStrokeColorWithColor(context,[[UIColor redColor]CGColor]);
CGContextSetFillColorWithColor(context,[[UIColor greenColor]CGColor]);
6.绘制路径
//填充色
//CGContextFillPath(context);
//按照路径描边
//CGContextStrokePath(context);
//既有描边又有填充色
CGContextDrawPath(context, kCGPathFillStroke);
4.UIBezierPath贝塞尔曲线
4.1是OC语言对C语言的绘制的的一部分API的封装结果
4.2作用：更加方便的绘制直线曲线矩形圆弧椭圆等
a.绘制三角形
在drawRect方法中创建BezierPath的实例
//创建BezierPath
UIBezierPath*path=[UIBezierPath bezierPath]
//移动到起始位置
[pathmoveToPoint:CGPointMake(50, 50)];
//绘制曲线
[pathaddLineToPoint:CGPointMake(50, 150)];
[pathaddLineToPoint:CGPointMake(200, 50)];
[pathaddLineToPoint:CGPointMake(50, 50)];
//设置颜色
[[UIColorredColor]setStroke];
[[UIColorgreenColor]setFill];
//设置path的常用属性
path.lineWidth=10;
//设置线头的样式
path.lineCapStyle=kCGLineCapSquare;
//设置交叉点的样式
path.lineJoinStyle=kCGLineJoinMiter;
//绘制
[path fill];
[pathstroke];
b、绘制圆弧
UIBezierPath *path2=[UIBezierPath bezierPath];
[path2addArcWithCenter:CGPointMake(80, 200) radius:60 startAngle:M_PI_2 endAngle:0clockwise:YES];
[path2stroke];
c、定制圆形的下载进度提示条
新建有一个View继承自UIView
在.h文件中公开两个属性.progressColor .progressValue
在-(void)drawRect:(CGRect)rect{}方法中绘制圆弧
可以与UISlider结合使用 slider的改变值用于显示下载的进度范围
d、绘制曲线
绘制曲线可以调用path addCurveToPoint:<#(CGPoint)#>controlPoint1:<#(CGPoint)#> controlPoint2:<#(CGPoint)#>方法 第一个参数是绘制的终点坐标 第二个参数是控制点1即线条扭曲的方向 第二个控制点的参数同理
e、绘制其他图形
绘制圆角矩形可以通过 UIBezierPath*path=[UIBezierPath bezierPathWithRoundedRect:CGRectMake(40, 40, 200, 200)cornerRadius:10];第一个参数是设定矩形的起始点 以及宽度 和高度 第二个参数是设置 边角相切圆半径
绘制椭圆形可以通过 UIBezierPath *path=[UIBezierPathbezierPathWithOvalInRect:CGRectMake(40, 40, 100, 100)];参数为 x ，y坐标点 宽度 与高度 宽==高 则是圆形
f、绘制字符串
在- (void)drawRect:(CGRect)rect{}方法中
1.定义一个字符串
2.定义一个字典 用于存放该字符串的显示样式 NSDictionary*[email protected]{NSFontAttributeName:[UIFont systemFontOfSize:24], NSForegroundColorAttributeName:[UIColorredColor]};
3.对字符串调用[str drawAtPoint:CGPointMake(40, 40)withAttributes:stringAttributes]方法设置显示的位置以及摆放的样式
*******对于长字符串来说
CGSizesize= [str2 sizeWithAttributes:stringAttributes];//sizeWith XXX计算的是一行平铺的宽度
1.CGRectstrRect= [str2 boundingRectWithSize:CGSizeMake(250, 999)options:NSStringDrawingUsesLineFragmentOrigin attributes:stringAttributescontext:nil];//分段显示
2.[str2drawInRect:CGRectMake(40, 80,strRect.size.width, strRect.size.height)withAttributes:stringAttributes];
strRect.size.width计算出能装的下所有的字符串的宽度，strRect.size.height能装的下所有字符串的高度
e、绘制图片
1.在方法中 CGRect imageRect=CGRectMake(50, 50, 200, 200);设置图片的位置以及大小
2.可以通过贝塞尔曲线来实现圆形图片UIBezierPath *path=[UIBezierPathbezierPathWithOvalInRect:imageRect];
3.[path addClip]调用切割方法 ，不再所画圆内的图片全部剪切掉
4.设置照片的路径
5.把图片画出来[image drawInRect:imageRect];