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

2016-06-29 本文已影响124人翟乃玉

猫猫分享，必须精品

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

一：Quartz 2D简介

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

1：iOS中的用处

绘制图形 : 包括绘制线条、三角形、矩形、圆、弧等。

绘制文字:平时我们用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);
}

我相信自己看代码能懂，需要注意的其实就是下面这几个方法。

CGContextRef ctx = UIGraphicsGetCurrentContext();
获取到当前view的上下文UIGraphicsGetCurrentContext()c语言方法，不要跟oc混淆。
UIBezierPath OC的类，专门用来弄路径的类

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

CGContextStrokePath ：把上下文的内容显示出来，参数就是上下文。

4：画其他

画第二根线
1.1 第一种方法:重新设置起点,添加一根线到某个点,一个UIBezierPath路径上面可以有多条线.
1.2 第二种方法:直接在原来的基础上添加线.把上一条的终点当做下一条线的起点.添加一根线到某个点，直接在下面addLineToPoint:

宽度,颜色,样式
设置这些样式,我们称为是修改图形上下文的状态.
设置线宽:CGContextSetLineWidth(ctx, 20);
设置线段的连接样式: CGContextSetLineJoin(ctx, kCGLineJoinRound);
添加顶角样式:CGContextSetLineCap(ctx, kCGLineCapRound);
设置线的颜色: [[UIColor redColor] setStroke];
画曲线

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

先设置一个曲线的起点
[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];