IOS之UIKit_Day04

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*stringAttributes=@{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];