猫猫学iOS之Quartz2D基本图像绘制

猫猫分享,必须精品

原创文章,欢迎转载。转载请注明:翟乃玉的博客
地址:http://www.jianshu.com/notebooks/4236923/latest

一:Quartz 2D简介

Quartz 2D是二维绘图引擎,他同时支持iOS和mac系统。Quartz2D的API是纯C语言的,来自于Core Graphics框架,所以里面的内容都是以CG开头的,比如CGContextRef

1:iOS中的用处

  1. 绘制图形 : 包括绘制线条、三角形、矩形、圆、弧等。
  • 绘制文字:平时我们用UILabel显示文字,这里完全可以用Quartz 2D自己显示文字。
  • 绘制图片、生成图片。
  • 读取PDF、者生成PDF。
  • 屏幕截图、对图片进行裁剪。
  • 自定义UI控件:系统的某些空间不能满足我们的要求时候,比如进度条之类的,我们可以用Quartz 2D绘制自己想要的控件。

** 在开发当中,Quartz 2D最具有的价值就是自定义UI控件了,当我们的控件样式极其复杂时,就可以用Quartz 2D把控件内部的结构给画出来。

2:学习Quartz 2D

学习Quartz 2D首先要知道CGContextRef(图形上下文)这个东西,图形上下文是用来保存用户绘制的内容状态,并决定绘制到哪个地方的。
绘图过程:用户首先把绘制好的内容先保存到图形上下文,然后
根据选择的图形上下文的不同,绘制的内容显示到不同的位置。

3:画直线

  • 我们直接自定义view在view里面画,在iOS中新建一个UIView的子类,系统会自动给我们生成一个被注释掉的代码,这个方法是drawRect,我们可以在这个方法里面绘图了。当view加载到viewController上面的时候,此view的drawRect方法在view显示的时候调用,在viewWillAppear之后,viewDidAppear之前调用。

效果:


效果

代码:

- (void)drawRect:(CGRect)rect {
    
    // 1.获取到与view绑定的上下文。
    CGContextRef ctx = UIGraphicsGetCurrentContext();//c语言方法获取
    // 2.描述内容。
        // 2.1 我们要画一条线。需要用到路径
    UIBezierPath *path = [UIBezierPath bezierPath];
        // 2.2 设置线的起点。
    [path moveToPoint:CGPointMake(20, 10)];
        // 2.3 设置线的终点
    [path addLineToPoint:CGPointMake(200 ,150)];
    
    
        //画第二条线,可以在原来基础上添加,也可以重新设置起点终点来画。
    [path addLineToPoint:CGPointMake(250 ,10)];
    
    
    // 3.把内容添加到上下文。
    CGContextAddPath(ctx, path.CGPath);
    // 4.显示出来。
    CGContextStrokePath(ctx);
}
  • 我相信自己看代码能懂,需要注意的其实就是下面这几个方法。
  1. CGContextRef ctx = UIGraphicsGetCurrentContext();
    获取到当前view的上下文UIGraphicsGetCurrentContext()c语言方法,不要跟oc混淆。
  2. UIBezierPath OC的类,专门用来弄路径的类

3.CGContextAddPath 把内容添加到上下文的方法,参数分别是上下文和路径,注意,这里的路径是c语音的路径,需要转换一下,UIBezierPath内有CGPathRef类型的字段CGPath,可以直接get(点语法)方法拿到。(想象一下UIColor和CGColor)。

  1. CGContextStrokePath :把上下文的内容显示出来,参数就是上下文。

4:画其他

  1. 画第二根线
    1.1 第一种方法:重新设置起点,添加一根线到某个点,一个UIBezierPath路径上面可以有多条线.
    1.2 第二种方法:直接在原来的基础上添加线.把上一条的终点当做下一条线的起点.添加一根线到某个点,直接在下面addLineToPoint:
  • 宽度,颜色,样式
    设置这些样式,我们称为是修改图形上下文的状态.
    设置线宽:CGContextSetLineWidth(ctx, 20);
    设置线段的连接样式: CGContextSetLineJoin(ctx, kCGLineJoinRound);
    添加顶角样式:CGContextSetLineCap(ctx, kCGLineCapRound);
    设置线的颜色: [[UIColor redColor] setStroke];

  • 画曲线

    画曲线方法比较特殊需要一个控制点来决定曲线的弯曲程度。画曲线方法为:

  1. 先设置一个曲线的起点
    [path moveToPoint:CGPointMake(10, 125)];
    2.再添加到个点到曲线的终点.同时还须要一个controlPoint(控件点决定曲线弯曲的方法程序)
    [path addQuadCurveToPoint:CGPointMake(240, 125) controlPoint:CGPointMake(125, 10)];

- 画矩形
画矩形直接利用UIBezierPath给我们封装好的路径方法
   - (x,y)点决定了矩形左上角的点在哪个位置。
   - (width,height)是矩形的宽度高度。
   - bezierPathWithOvalInRect:CGRectMake(x, y, width, height)。
   - 圆角矩形的画法多了一个参数,cornerRadius。
   - cornerRadius它是矩形的圆角半径。
   - 通过圆角矩形可以画一个圆.当矩形是正方形的时候,把圆角半径设为宽度的一半,就是一个圆。
   - bezierPathWithRoundedRect:CGRectMake(10, 100, 50, 50) cornerRadius:10
- 画圆
画椭圆的方法为:
- 前两个参数分别代码圆的圆心,后面两个参数分别代表圆的宽度,与高度(其实就是根据一个矩形定义一个圆)
- 宽高都相等时,画的是一个正圆, 不相等时画的是一个椭圆
      bezierPathWithOvalInRect:CGRectMake(10, 100, 50, 50)

- 利用UIKit封装的上下文进行画图
- 直接用**[path stroke]**就可以了。
- 它底层的实现,就是获取上下文,拼接路径,把路径添加到上下文,渲染到View。
- 画圆弧
首先要确定圆才能确定圆弧,圆孤它就是圆上的一个角度

/**
Center:圆心
radius:圆的半径
startAngle:起始角度
endAngle:终点角度
clockwise:Yes顺时针,No逆时针
*/
[UIBezierPath bezierPathWithArcCenter:(CGPoint)
radius:(CGFloat)
startAngle:(CGFloat)
endAngle:(CGFloat)
clockwise:(BOOL)]

- 画扇形

画扇形的方法为:
- 先画一个圆孤再添加一个一根线到圆心,然后关闭路径.
- 关闭路径就会自动从路径的终点到路径的起点封闭起下
- 用填充的话,它会默认做一个封闭路径,从路径的终点到起点. 
      [path fill];

推荐阅读更多精彩内容

  • Core Graphics Framework是一套基于C的API框架,使用了Quartz作为绘图引擎。它提供了低...
    ShanJiJi阅读 1,163评论 0 20
  • Quartz2D以及drawRect的重绘机制字数1487 阅读21 评论1 喜欢1一、什么是Quartz2D Q...
    PurpleWind阅读 514评论 0 3
  • 什么是Quartz 2D 1>Quartz 2D是一个二维绘图引擎,同时支持iOS和Mac OS X系统(跨平台,...
    青葱烈马阅读 621评论 0 3
  • “你想去哪里玩吗?无锡其实没啥好玩的,太湖现在也太冷了。”我努力地想着景点,“要么去看看灵山梵宫,起码那个顶还是很...
    嗷呜嗷呜P小婧阅读 764评论 2 3
  • 夜,微寒 人,微凉 忽然惊醒, 于这万籁沉寂的夜 空气仿佛也停止了流动 只剩时间 在滴答 滴答的行走 这季节 再也...
    luki1986阅读 106评论 1 0
  • 父亲往事 在这个猛然醒来的暮春夜晚,关于父亲的点滴往事洪水决堤般汹涌而至,吞没了我整个思绪…… 父亲是...
    凡姐饭饭阅读 667评论 5 5