Quartz2D

标签：

1 Quartz2D简介

    Quartz2D写的同一份代码，既可以运行在iphone上又可以运行在mac上，可以跨平台开发。开发中比较常用的是截屏/裁剪/自定义UI控件。

1.drwaRect方法的使用

- (void)drawRect:(CGRect)rect.

1>.方法当视图第一次显示的时候就会调用，再viewWillAppear后调用

2>.默认只会调用一次。当使用[self setNeedDisplay]就可以重绘。但不会立即绘制，只会再一次显示刷新绘制

2. 使用步骤

    1.自定义view，并且复写drawRect：

    2.取得跟当前view想关联的图形

    3. 绘制好图形，绘制时的线条叫路径。路径由一个或多条直线或曲线组成

    4.图形上下文的内容显示到view上

2 基本图形绘制

 1.线条绘制

- (void)drawRect:(CGRect)rect
{
    // 1.获取上下文CGContextRef
    // 目前学的上下文都跟UIGraphics有关，以后想直接获取上下文，直接敲一个UIGraphics
    CGContextRef ctx = UIGraphicsGetCurrentContext(); //current默认是view
    
    // 2.设置绘图信息(拼接路径)
    UIBezierPath *path = [UIBezierPath bezierPath];
    // 设置起点
    [path moveToPoint:CGPointMake(10, 10)];
    // 添加一条线到某个点
    [path addLineToPoint:CGPointMake(125, 125)];
    [path addLineToPoint:CGPointMake(240, 10)];  //以上个点为起点
    
    // 3.把路径添加到上下文
    // 直接把UIKit的路径转换成CoreGraphics
    CGContextAddPath(ctx, path.CGPath);
    
    // 设置绘图状态
    CGContextSetLineWidth(ctx, 10);                    //设置线宽
    CGContextSetLineCap(ctx, kCGLineCapRound);         //设置线条端点的形状
    //CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);     //设置线条的颜色
    [[UIColor redColor] set];
    
    // 4.把上下文渲染到视图
    // Stroke描边
    CGContextStrokePath(ctx);
    
}

 2.曲线绘制

- (void)drawRect:(CGRect)rect
{
    // 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.拼接路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    CGPoint startP = CGPointMake(10, 125);    //起点
    CGPoint endP = CGPointMake(240, 125);     //终点
    CGPoint controlP = CGPointMake(125, 0);   //顶点
    [path moveToPoint:startP];
    [path addQuadCurveToPoint:endP controlPoint:controlP];
    
    // 3.把路径添加到上下文
    CGContextAddPath(ctx, path.CGPath);
    
    // 4.渲染上下文到视图
    CGContextStrokePath(ctx);
    
}

 3.封闭图形

    三角形    
    // 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.拼接路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    CGPoint startP = CGPointMake(10, 10);
    
    [path moveToPoint:startP];
    
    [path addLineToPoint:CGPointMake(125, 125)];
    
    [path addLineToPoint:CGPointMake(240, 10)];
    
    // 从路径的终点连接到起点
    [path closePath];
    //[path addLineToPoint:startP];
    
    // 3.把路径添加到上下文
    CGContextAddPath(ctx, path.CGPath);
    
    [[UIColor blueColor] setFill];        //填充颜色
    [[UIColor redColor] setStroke];       //线条颜色，需要设置线宽  
        
    CGContextSetLineWidth(ctx, 15);
    
    // 4.渲染上下文
    //    CGContextStrokePath(ctx);
    //    CGContextFillPath(ctx);
    // 即填充又描边 kCGPathFillStroke
    CGContextDrawPath(ctx, kCGPathFillStroke);

 4.矩形/圆矩形

  cornerRadius的大小是长宽的一半，那么就是圆形

    // 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.拼接路径  cornerRadius
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 200, 200)];
    path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 200, 200) cornerRadius:20];
    
    // 3.把路径添加到上下文
    CGContextAddPath(ctx, path.CGPath);
    
    // 4.渲染上下文
    CGContextStrokePath(ctx);

 5.圆形

    // 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.拼接路径
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 200, 100)];
    
    // 3.把路径添加到上下文
    CGContextAddPath(ctx, path.CGPath);
    
    // 4.渲染上下文
    CGContextStrokePath(ctx);

 6.圆弧

    // 1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.拼接路径
    CGPoint center = CGPointMake(125, 125);   //圆心
    CGFloat radius = 100;                     //半径
    CGFloat startA = 0;                       //起点。0℃为右正方（北偏东45°） 
    CGFloat endA = M_PI_2;                    //终点，45℃
    //clockwise为YES代表是顺时针
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
    
    [path addLineToPoint:center]; //添加一条线到圆心，就可绘制四分之一圆
    // 3.把路径添加到上下文
    CGContextAddPath(ctx, path.CGPath);
    
    // 4.渲染上下文
    CGContextStrokePath(ctx);   绘制圆弧
    //CGContextFillPath(ctx);   绘制圆形

Quartz2D

标签：

原文地址：http://my.oschina.net/u/2346786/blog/516597