Quartz2D学习笔记--（1）

一、简单图形线条的绘制

1.要想绘制图形要重写

• (void)drawRect:(CGRect)rect方法
  绘图的的思路为
  1、首先获取图形上下文
  2、设置绘图路径
  3、将绘图路径添加到图形上下文
  4、渲染图形上下文
  1.1线段的简单绘制

    // 首先获取图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
  
  // 设置绘图信息(拼接路径)
  UIBezierPath *path = [UIBezierPath bezierPath];
  
  // 设置起点
  [path moveToPoint:CGPointMake(10, 10)];
  
  // 设置终点
  [path addLineToPoint:CGPointMake(100, 10)];
  
  // 再画一条先，线的终点是下个线段的起点
  [path addLineToPoint:CGPointMake(100, 100)];
  
  // 把路径添加上下文
  CGContextAddPath(ctx, path.CGPath);
  
  // 渲染上下文 Stroke是描边的意思
  CGContextStrokePath(ctx);
  

注意：在实际的开发过程中一般是一个线段对应一个路径
1.2、绘制有颜色和宽度的两条线段

    // 首先获取图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();

// 设置绘图信息(拼接路径)
UIBezierPath *path = [UIBezierPath bezierPath];

// 设置起点
[path moveToPoint:CGPointMake(10, 10)];

// 设置终点
[path addLineToPoint:CGPointMake(100, 10)];


UIBezierPath *secPath = [UIBezierPath bezierPath];

[secPath moveToPoint:CGPointMake(100, 100)];

[secPath addLineToPoint:CGPointMake(100, 150)];

// 设置绘图状态
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextSetLineWidth(ctx, 15);

// 设置颜色
[[UIColor blueColor] set];

// 把路径添加上下文
CGContextAddPath(ctx, path.CGPath);
CGContextAddPath(ctx, secPath.CGPath);

// 渲染上下文 Stroke是描边的意思
CGContextStrokePath(ctx);

1.3、二次曲线的绘制

// 首先获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();

// 定义路径
// 起点
CGPoint startPoint = CGPointMake(0, 100);
// 终点
CGPoint endPoint = CGPointMake(200, 100);

// 控制点
CGPoint controlPoint = CGPointMake(100, 0);

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:startPoint];
[path addQuadCurveToPoint:endPoint controlPoint:controlPoint];

// 设置上下文属性
CGContextSetLineWidth(ctx, 10);
CGContextSetLineCap(ctx, kCGLineCapRound);
// 设置颜色
[[UIColor blueColor] set];

// 将路径添加到上下文
CGContextAddPath(ctx, path.CGPath);
// 渲染上下文
CGContextStrokePath(cox);

1.4、绘制三角形

 // 获取图形上下文
 CGContextRef  ctx = UIGraphicsGetCurrentContext();

// 描述路径
UIBezierPath *path = [UIBezierPath bezierPath];

// 设置起点
[path moveToPoint:CGPointMake(10, 10)];
[path addLineToPoint:CGPointMake(100, 100)];
[path addLineToPoint:CGPointMake(100, 10)];

// 关闭路径
[path closePath];
// 设置上下文属性
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextSetLineWidth(ctx, 10);
[[UIColor blueColor]set];
// 将路径添加到上下文
CGContextAddPath(ctx, path.CGPath);
// 渲染路径
//    CGContextStrokePath(ctx);  // 描边
  CGContextFillPath(ctx); // 填充

1.5、绘制圆弧

// 圆弧的画法
CGContextRef ctx = UIGraphicsGetCurrentContext();

// 重点
CGPoint center = CGPointMake(100, 100);

CGFloat startAngle = 0;
CGFloat endAngle = M_PI_2;
CGFloat radius = 50;

// 注意clockwise为NO为逆时针，为YES时为顺时针
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];

// 注意，如果需要画四分之一圆的话需要再添加一个线段到圆心
[path addLineToPoint:center];

[path closePath]; // 关闭路径

CGContextAddPath(ctx, path.CGPath);

[[UIColor blueColor]set];

CGContextStrokePath(ctx);

1.6、绘制饼图

 NSArray *percents = @[@25,@25,@50];

// 获取图形上下文
CGContextRef ctx  = UIGraphicsGetCurrentContext();
CGFloat startAngle = 0;
CGFloat  endAnglei = 0;
CGFloat angle = 0;
CGFloat radius = 100;
CGPoint center = CGPointMake(100, 100);


for (NSNumber *percent in percents) {
    
    startAngle = endAnglei;
    angle = [percent intValue]/100.0*M_PI*2;
    endAnglei = startAngle + angle;
    
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAnglei clockwise:YES];
    [path addLineToPoint:center];
    
    CGContextAddPath(ctx, path.CGPath);
    
    [[UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1.0] set];
   
//        CGContextStrokePath(ctx);
     CGContextFillPath(ctx);
}

1.7、绘制柱状图

 NSArray *percents = @[@25,@25,@50];

// 获取图形上下文
CGContextRef ctx  = UIGraphicsGetCurrentContext();
CGFloat rectW = rect.size.width / (percents.count*2-1);
CGFloat rectH = rect.size.height;


for(int i = 0;i<percents.count;i++){

    int num = [percents[i] intValue];
    CGFloat height = num/100.0*rectH;
    
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(2*rectW*i, rectH - height, rectW, height)];
    
    CGContextAddPath(ctx, path.CGPath);
    
    CGContextStrokePath(ctx);
}

1.8、绘制文字和图片

NSString *str = @"hello wordfdfdffffffffffffff";

NSDictionary *dic = @{NSFontAttributeName:[UIFont systemFontOfSize:15],NSForegroundColorAttributeName:[UIColor blueColor],NSVerticalGlyphFormAttributeName:@1};

CGRect yjRect = CGRectMake(0, 0, 100, 100);

//    [str drawInRect:yjRect withAttributes:dic]; (这个绘制方法会自动换行)


[str drawAtPoint:CGPointZero withAttributes:dic]; （这个不会换行）

注意：画图片方法与这个差不多
1.9、屏幕刷新的定时器

    // 屏幕刷新时会调用，的定时器，每秒刷新60次
    CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];
    
    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];