Core Graphics基础和实践

1. 概念

二维的绘图库。当控件样式复杂时,可以把控件画出来,就是自定义控件.

2. 基础绘制流程

在drawRect方法中实现

1. 获取图形上下文
   ​ CGContextRef ctx = UIGraphicsGetCurrentContext();
2. 画贝塞尔曲线，可以画各种形状等
   ​ UIBezierPath *path = [self arcBezierPath];
3. 路径添加到上下文中
   ​ CGContextAddPath(ctx, path.CGPath);
4. 渲染到视图上
   ​ CGContextStrokePath(ctx);

3. 基础绘画流程简化

前两步一样，第三部直接用贝塞尔路径渲染。它底层的实现,就是获取上下文,拼接路径,把路径添加到上下文,渲染到View

1. 画路径，可以是线条曲线矩形圆等
   UIBezierPath *path = [self arcBezierPath];
2. 直接用贝塞尔曲线绘制或填充
   [path stroke];

4. 下载进度条

用到了定时器CADisplayLink，刷新频率60hz，也就是1秒钟会执行60次指定的selector

    self.link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];
    [self.link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

绘制的方法中，调整endAngle，就会出现动态的效果

    UIBezierPath *arcPath  = [UIBezierPath bezierPathWithArcCenter:CGPointMake(125, 125) radius:100 startAngle:0 endAngle:M_PI*2*self.proValue clockwise:YES];
    [arcPath setLineWidth:25];
    [[[UIColor blueColor] colorWithAlphaComponent:0.6] set];
    [arcPath stroke];

5. 画饼图

用贝塞尔画圆弧，添加直线到圆心，设置颜色[[UIColor redColor] setFill],最后[path fill]

6. UIKit绘图

这部分比较简单，文字和图片的绘制

7. 图像上下文生成新的图片

有着特定的步骤

1. 开启图形上下文
   ​ UIGraphicsBeginImageContextWithOptions(image.size, YES, 0);

2. 可以添加裁剪区域，然后执行绘制图片或者渲染layer等操作

       //裁剪区域
       UIBezierPath *clipPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, yellow.size.width, yellow.size.height)];
       [clipPath addClip];
       //图片绘制
       [yellow drawAtPoint:CGPointMake(0, 0) blendMode:kCGBlendModeNormal alpha:1.0];
       //渲染layer
       [self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
   

3. 图片上下文当中生成一张图片
   ​ UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

4. 关闭上下文
   ​ UIGraphicsEndImageContext();

8. 图像擦除

CGContextClearRect(ctx, rect);

9. 其他Tips

1. 查询当前CGPoint或者CGRect是否在一个Frame内

   CGRectContainsRect(button.frame, locationrect)

2. 大作业，制作一个绘画板，用到的东西就是最基础的东西，只要分步骤，一步一步实现，就可以完成，大家试着自己做出来

   ​

10. 参考代码地址 github