zoukankan      html  css  js  c++  java
  • 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];

  • 相关阅读:
    WPF之SharpAvi视频录制(AVI)
    WPF之录制桌面视频(FFMPeg)
    Unity3d之Navigation导航系统(AII敌人)
    Unity3D之InstantOC(遮挡剔除)
    Unity3D之Camera
    Unity3D之Material(材质、着色器、纹理)
    分布式服务弹性框架“Hystrix”实践与源码研究(一)
    平安某金所奇葩的面经-关于幂等和ROA设计的反思
    来自GitHub的Android UI开源项目
    JavaScript实现MVVM之我就是想监测一个普通对象的变化
  • 原文地址:https://www.cnblogs.com/katydid/p/4307829.html
Copyright © 2011-2022 走看看