Core Graphics基础和实践

来源:互联网 发布:webbench 源码 编辑:程序博客网 时间:2024/05/21 18:41

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

原创粉丝点击