iOS之基本图形绘制Quartz2d的的使用

QuartZ2d是二维绘图引擎,包含在core Graphics框架中,是纯C语言的;

图形上下文:CGContextRef数据类型,包含以下信息:绘图路径,绘图状态,绘图输出目标;

注意:绘图的顺序对最终显示结果有影响;

1.当view第一次被显示的时候会调用d'ra'wRect:(CGRect )rect

2.不要手动调用drawRect:方法执行重绘,否则可能无法正确的获取图形上下文;

3.手动调用重绘的方法:setNeedsDisplay(全部重绘),steedsDisplayInRect(部分区域重绘);

4.rect表示当前view的bounds

5.只有在drawrect:方法中能获取当前view的图形上下文;

6.手动调用重绘的时候,内部会创建一个与当前view相关的图形上下文,然后再调用drawRect:方法实现重绘,绘制的的图形实际上是绘制到了view的图层上;

渲染模式:

空心-------strokePath

实心---------fillPath

填充--------EOFillPath

[path stroke];

CGContextDrawPath(ctx,KCGPathStroke);

CGContextStrokePath(ctx);

填充一个路径的时候,路径里面的子路径是独立填充的;决定一个点事否被填充有两个规则:

1.非零计数规则:一个点从左到右跨过,计数器+1,从右到左跨过计数器-1;结果为零就不填充,结果不为零就填充;

2.奇偶规则:一个点被跨过奇数次,就被填充,被跨过偶数次就不填充,和方向没关系.

==============================================

CGContextBeginPath(ctx);开始路径

CGContextClosePath(ctx);闭合路径，如果不闭合路径的话，会接着上次的点绘制；

绘制直线的时候只能用stroke（设置线的）有效果；fill是填充图形的

    //1.获取图形上下文对象

    CGContextRef ctx =UIGraphicsGetCurrentContext();

    

    //2.向图形上下文对象中添加路径

    CGContextMoveToPoint(ctx,50,50);

    

    //2.1添加线段

    CGContextAddLineToPoint(ctx,150,150);

    

    CGContextAddLineToPoint(ctx,50,150);

    

    //    CGContextAddLineToPoint(ctx, 50, 50);

    //关闭路径 (终点到起点连线)

    CGContextClosePath(ctx);

    

    //2.2 重新设置起点

    CGContextMoveToPoint(ctx,50,200);

    CGContextAddLineToPoint(ctx,200,200);

    

       绘制矩形路径,向上下文对象中添加路径

    CGContextAddRect(ctx,CGRectMake(50,50,150,150));

    //3.渲染

   CGContextStrokePath(ctx);//空心

       

    CGContextFillPath(ctx);//填充

================================

   UIBezierPath是UIKit框架封装好的框架;

 //1.获取上下文对象

    CGContextRef ctx =UIGraphicsGetCurrentContext();

    

    //2.创建UIBezierPath对象

    UIBezierPath * path = [UIBezierPathbezierPathWithRect:CGRectMake(50,50,100,100)];

    

    //3.把创建的UIBezierPath对象添加到上下文对象中

    CGContextAddPath(ctx, path.CGPath);//转换成CGPath

    

    //4.渲染

    CGContextDrawPath(ctx,kCGPathFill);

==========================

不用获取图形上下文,直接绘制

    //1.创建UIBezierPath对象

    UIBezierPath * path = [UIBezierPathbezierPathWithRect:CGRectMake(100,100,100,100)];

    

    

    //2.渲染

    [path fill];

=======================================

创建UIBezierPath.并添加子路径

    //1.获取图形上下文对象

    CGContextRef ctx =UIGraphicsGetCurrentContext();

    

    //2.创建UIBezierPath路径对象

    UIBezierPath * path = [UIBezierPathbezierPath];

    //2.1 添加子路径

    //2.1.1 设置起点

    [path moveToPoint:CGPointMake(50,50)];

    //2.1.2 添加线段

    [path addLineToPoint:CGPointMake(200,200)];

    

    //2.1.3 再添加一个线段

    [path addLineToPoint:CGPointMake(50,200)];

    

    //关闭路径

    [path closePath];

    

    //3.把创建好的UIBezierPath对象添加到图形上下文中

    CGContextAddPath(ctx, path.CGPath);

    

    

    //4.渲染

    

    CGContextDrawPath(ctx,kCGPathStroke);

======================================================

//通过画弧的方式绘制圆

    //1.获取图形上下文对象

    CGContextRef ctx =UIGraphicsGetCurrentContext();

    

    //2.创建路径

    //设置圆心

    CGPoint centerP = CGPointMake(150, 150);

    

    //设置半径

    CGFloat radius = 100.f;

    

    //设置起始弧度

    CGFloat start = 0;

    

    //设置结束弧度

    CGFloat end = M_PI_4;

    

    

    UIBezierPath * path = [UIBezierPathbezierPathWithArcCenter:centerPradius:radiusstartAngle:startendAngle:endclockwise:YES];

    

    //添加一条到圆心的线

    [path addLineToPoint:centerP];

    

    //关闭路径

    [path closePath];

    

    //3.把路径添加到图形上下文对象中

    CGContextAddPath(ctx, path.CGPath);

    

    //4.渲染

    CGContextDrawPath(ctx,kCGPathFill);

======================================================

绘制矩形:OC中的方法

    UIBezierPath * path = [UIBezierPathbezierPathWithRect:CGRectMake(50,50,100,100)];

//绘制矩形方法一:

UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 200, 200)];

//绘制矩形放法二:

     高度为1, 居中的矩形

    UIRectFill(CGRectMake(0, rect.size.height *0.5, rect.size.width,1));

//绘制矩形方法三:

一个点一个点的画;

//绘制矩形方法四:CGContextAddRect(ctx,CGRectMake(,,,));

==================

绘制圆角矩形:

UIBezierPath * path = [UIBezierPathbezierPathWithRoundedRect:CGRectMake(50,50,200, 200)cornerRadius:100];

绘制圆弧:

UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:圆心 radius:半径 startAngle:起始弧度 endAngle:结束弧度 clockwise:YES];//YES表示顺时针

+++++++++++++++++++++++++++++++++++++++++++

绘制圆/椭圆:(C语言的方法)

CGContextAddEllipseInRect(ctx, CGRectMake(50, 50, 200, 200));

绘制矩形:

CGContextAddRect(ctx, CGRectMake(50, 50, 150, 150));

绘制圆弧/圆:

CGContextAddArc(ctx,   );

绘制填充样式的椭圆:

CGContextFillEllipseInRect(ctx,      );

总结:绘制圆形的方法有:圆弧,椭圆,圆角矩形都可以画出圆形;

==========================

绘图状态的设置:

设置线宽:

CGContextSetlineWidth(ctx,20);

path.lineWidth =20;

[path setLineWidth:20];

设置线的颜色:

         CGContextSetRGBStrokeColor(cox,1,0,1,1);

           CGContextSetStrokeColorWithColor(context, [UIColorredColor].CGColor);

    [[UIColor redColor] setStroke];//设置stroke时的颜色

    [[UIColor redColor] setFill];//设置填充颜色

    [[UIColorredColor]set];//不管是空心还是填充都有效果

设置线头样式:

        CGContextSetLineCap(ctx,KCGlineCapButt);

    path.lineCapStyle = kCGLineCapSquare;

        [path setLineCapStytle:KCGLineCapRound];

//设置连接处样式

    CGContextSetLineJoin(ctx,kCGLineJoinRound);

    path.lineJoinStyle =kCGLineJoinBevel;

        [path setLineJoinStytle:KCGLineJoinBevel];

==============================

图形上下文矩阵操作-----------可以让图形上下文中的路径一起变化

    

  //缩放      CGContextScaleCTM(ctx, 0.5, 0.5);

   

 //旋转   CGContextRotateCTM(ctx, M_PI_4);

    

//平移   CGContextTranslateCTM(ctx, 200, 50);

=============================================

图像上下文栈的操作:

两个钟要的方法:

//1.获取图形上下文对象

    CGContextRef ctx = UIGraphicsGetCurrentContext();

2.

//在下一次绘图之前替换掉当前的图形上下文状态

    CGContextRestoreGState(ctx);

例如:

    //1.获取图形上下文对象

    CGContextRef ctx =UIGraphicsGetCurrentContext();

    

    //在绘图之前保存当前上下文状态

    CGContextSaveGState(ctx);

    

    //矩阵操作

    

    //缩放

    CGContextScaleCTM(ctx,0.5,0.5);

    

    //旋转

    CGContextRotateCTM(ctx,M_PI_4);

    

    //平移

    CGContextTranslateCTM(ctx,200,50);

    

    

    

    //2.创建路径

    UIBezierPath * path1 = [UIBezierPathbezierPathWithRect:CGRectMake(20,50,240,100)];

    

    UIBezierPath * path2 = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(50,180,100,50)];

    

    UIBezierPath * path3 = [UIBezierPathbezierPathWithArcCenter:CGPointMake(150,150)radius:100startAngle:0endAngle:2*M_PIclockwise:YES];

    

    

    

    //3.把路径添加到图形上下文对象中

    

    CGContextAddPath(ctx, path1.CGPath);

    CGContextAddPath(ctx, path2.CGPath);

    CGContextAddPath(ctx, path3.CGPath);

    

    

    

    //3.1或一条线段

//    CGContextMoveToPoint(ctx, 50, 100);

//    

//    CGContextAddLineToPoint(ctx, 100, 200);

    

    CGContextSetLineWidth(ctx, 20);

    

    [[UIColor redColor] set];

    

    //4.渲染

    

    CGContextDrawPath(ctx, kCGPathStroke);

    

    

    //--------再画一个矩形--------

    

    //在下一次绘图之前替换掉当前的图形上下文状态

    CGContextRestoreGState(ctx);

    

    UIBezierPath * path4 = [UIBezierPath bezierPathWithRect:CGRectMake(50,250,50,30)];

    CGContextAddPath(ctx, path4.CGPath);

    

        [[UIColor greenColor] set];

        CGContextSetLineWidth(ctx, 10);

    

    CGContextDrawPath(ctx, kCGPathStroke);

    //--------再画一个矩形--------

====================================================================

//首先封装了一个方法,用来生成背景图片

- (UIImage *) imageWithFrame:(CGRect)frame alphe:(CGFloat)alphe {

    frame = CGRectMake(0, 0, frame.size.width, frame.size.height);

    UIColor *redColor = [UIColorcolorWithRed:0 green:0blue:0 alpha:alphe];

    UIGraphicsBeginImageContext(frame.size);

    CGContextRef context =UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [redColorCGColor]);

    CGContextFillRect(context, frame);

    UIImage *theImage =UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return theImage;

}