Quartz2D

Quartz2D

• 1.Quartz2D是一个二维的绘图引擎,同时支持iOS和Mac OS
• 2.图形上下文(Graphics Context):是CGContextRef类型的数据.

作用:

• 2.1保存绘图信息,绘图状态.

• 2.2决定绘制的输出目标(绘制到什么地方去)(输出目标可以是PDF文件)

• 3.过程:

绘制好图形----(保存)--->通过图形上下文---(显示)--->输出目标

• 4.在同一个绘图序列里,制定不同的图形上下文,可以将所绘的图像绘制到不同的目标上

• 在Quartz2D里,提供了几种Graphics Context

 - ①Bitmap Graphics Context
 - ②PDF Graphics Context
 - ③Window Graphics Context
 - ④Layer Graphics Context
 - ⑤Printer Graphics Context

• 5.自定义UI控件

• 5.1如何利用Quartz2D自定义UI控件?
• 5.2如何利用Quartz2D绘制东西到UIView上?

- ①首先,要有图形上下文,因为它能保存图形绘制信息,并且决定绘制到什么地方
-  ②其次,图形上下文必须跟view相关联,才能将内容绘制到UIView上面.

• 6.自定义UI控件的步骤

• 6.1创建一个类继承于UIView

• 6.2实现

   - (void)drawRect:(CGRect)rect {
// Drawing code
}

然后在这个方法中,可以:

• 6.2.1获取跟当前View相关联的图形上下文
• 6.2.2绘制相应的图形内容,绘制时产生的线条,称为路径----是由一个或者多个直线或者曲线段组成
• 6.2.3利用图形上下文绘制的所有内容,渲染显示到View上
• 6.2.4利用UIKit封装的绘图函数,直接绘图

---

BezierPath基础

• 1.UIBezierPath对象,是对CGPathRef数据类型的封装,path如果是基于矢量图(面向对象图像或者绘图图像,一系列由线连接起来的点)的,都用直线或者曲线创建

• 2.我们使用直线段去创建矩形和多边形,使用曲线段创建弧,圆或者其他复杂的曲线状态
• 3.每一段都包括一个,或者多个点.
  4.每一个直线段或者曲线段的结束的地方是下一个开始的地方
• 5.每一个连接的直线段或者曲线段的集合,称为subPath
• 6.一个UIBezierPath对象定义一个完整的路劲,包括一个或者多个subPath.
• 7.创建path对象和使用path对象的过程是分开的,创建path是第一步,包含以下步骤:
• 7.1创建path对象
• 7.2使用moveToPoint:去设置初始线段的的起点

下边给出了简单的例子

#pragma mark------ 利用UIBezierPath绘制图像

- (void)BezierPath_1{
    UIColor *color = [UIColor redColor];
    [color set];
    UIBezierPath *path = [UIBezierPath bezierPath];
    path.lineWidth = 5.0;//线宽
//    path.lineCapStyle = kCGLineCapRound;//线条的拐角
    path.lineJoinStyle = kCGLineJoinRound;//对接点的处理
    
    /*
     线和多边形是一些简单形状,我们可以使用moveToPoint:或者addLineToPoint:方法去构建.
     moveToPoint:设置我们想要形状的起点,从这个点开始,我们可以使用方法addLineToPoint:去创建一个形状的线段,也可以连续的创建line.每一个line的起点都是先前线段的终点,终点就是指定的点
     
     */
        
    //设置初始线段起点
    [path moveToPoint:CGPointMake(100.0, 0.0)];
    //使用line或者Curve去定义一个或者多个subPath
    [path addLineToPoint:CGPointMake(200.0, 40.0)];
    [path addLineToPoint:CGPointMake(160.0, 140.0)];
    [path addLineToPoint:CGPointMake(40.0, 140.0)];
    [path addLineToPoint:CGPointMake(0.0, 40.0)];
    //结束路径
    //closePath方法,不仅结束了subPath ,它也在最后一个点和第一个点之间建立了一条线段,如果画的是多边形,这一点省去了我们画最后一条线
    [path closePath];
    //根据坐标连线
    [path stroke];
    
    
}

#pragma mark-----画线1-------
- (void)drawLine_1{
//1.获取图形上下文(图层)
    //目前所用的上下文,都是UIGraphics开头的
    // CG-Context-Ref:[CG:目前使用的类型和函数,一般都是以CG开头][Ref:引用] [框架:CoreGraphics]
    CGContextRef cxt = UIGraphicsGetCurrentContext();
    //描述路径(可变路径)
    //创建路径
    CGMutablePathRef  path = CGPathCreateMutable();
    //设置起点
    CGPathMoveToPoint(path, NULL, 60, 50);
    //设置终点
    CGPathAddLineToPoint(path, NULL, 200, 200);
    //把路径添加到上下文
    CGContextAddPath(cxt, path);
    //线宽
    CGContextSetLineWidth(cxt, 5.0);
    //颜色
//    [[UIColor purpleColor] set];
    CGContextSetRGBStrokeColor(cxt, 0.7, 0.8, 0.5, 0.9);
    
    //设置线的样式
    CGContextSetLineCap(cxt, kCGLineCapRound);
    //填充
    [[UIColor greenColor]setFill];
    
    //描边
    [[UIColor blueColor]setStroke];
    
    //渲染上下文(填充加描边)
    CGContextDrawPath(cxt, kCGPathEOFillStroke);
//    CGContextFillPath(cxt);
}

#pragma mark-----曲线/矩形-------
- (void)drawCurve{
//获取上下文
    CGContextRef cxt = UIGraphicsGetCurrentContext();
    //创建路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    //设置起点
    [path moveToPoint:CGPointMake(100, 100)];
    //设置终点
    [path addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(10, 50) controlPoint2:CGPointMake(100, 10)];

//圆形的绘制
//      path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 50, 50, 50) cornerRadius:25];

/*  //描述圆弧路径
    /*
     bezierPathWithArcCenter:<#(CGPoint)#> radius:<#(CGFloat)#> startAngle:<#(CGFloat)#> endAngle:<#(CGFloat)#> clockwise:<#(BOOL)#>
     参数1:圆弧的中心点
     参数2:半径
     参数3:起始角度
     参数4:结束角度
     参数5:是否顺时针
     */
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2, self.frame.size.height/2) radius:self.frame.size.width/2 startAngle:0 endAngle:M_PI clockwise:NO];
*/

    
//添加到上下文上
    CGContextAddPath(cxt, path.CGPath);
    //渲染上下文
//    CGContextDrawPath(cxt, kCGPathFillStroke);
    CGContextStrokePath(cxt);
}