Quartz 2D的简单使用

<strong><span style="font-size:24px;">Quartz 2D的简单使用</span></strong>

使用Quartz 2D这个框架可以在uiview画出我们自己想画的图形，而不用使用系统提供的控件。但是在要实现这个效果要重写uiview的-(void)drawRect:(CGRect)rect方法；

1.绘制简单的线段

-(void)drawRect:(CGRect)rect
{
    //获取图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    //设置线条的宽度
    CGContextSetLineWidth(ctx, 10);
    //设置线条的头尾部的样式
    CGContextSetLineCap(ctx, kCGLineCapRound);
    //设置两线段之间转折点的样式
    CGContextSetLineJoin(ctx,kCGLineJoinRound);
    
    //画一条直线（两点一线），确定起点
    CGContextMoveToPoint(ctx, 100, 100);
    //添加一条线段到（100，200）
    CGContextAddLineToPoint(ctx, 100, 200);
    
    //以第一条线段的终点为起点，添加一个线段到（150，253）
    CGContextAddLineToPoint(ctx, 150, 253);
    //设置颜色(第一种通过rgb方式设置）
    CGContextSetRGBStrokeColor(ctx, 0, 0, 1, 1);
    //设置颜色（第二种 通过oc的方式设置，setStroe设置空心图形的颜色  setFill设置实心图形的
    //的颜色，set ：即可设置空心颜色，也可设置实心颜色
//    [[UIColor greenColor]setStroke];
//    [[UIColor greenColor]setFill]
    [[UIColor blackColor]set];
    //渲染ctx,stroke为空心。所有的线段都为空心渲染
    CGContextStrokePath(ctx);
}

2.绘制三角形

-(void)drawRect:(CGRect)rect
{
    //获取图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(ctx, 10);
    
    //---------------直接在3点之间添加3条线段，形成3角形－－－－－－－－－－－
    //设置一个起点
    CGContextMoveToPoint(ctx, 10, 10);
    //从（10，10）添加一条线段到（10，100）
    CGContextAddLineToPoint(ctx, 10, 100);
    //从（10，100）添加一条线段到（100，150）
    CGContextAddLineToPoint(ctx, 100, 150);
    //从（100，150）添加一个线段到（10，10）
    CGContextAddLineToPoint(ctx, 10,10);
    [[UIColor blackColor]setFill];
    CGContextFillPath(ctx);
   //－－－－－－－－－－－－第二种：最后一条线段，调用封闭路径的方法（使终点和起点自动相连形成一条线段）－－－－
    
    CGContextMoveToPoint(ctx, 200, 200);
    CGContextAddLineToPoint(ctx, 200, 250);
    CGContextAddLineToPoint(ctx, 250, 300);
    //关闭路径（连接起点和终点）
    CGContextClosePath(ctx);
    
    [[UIColor whiteColor] set];
//    CGContextStrokePath(ctx);
    //渲染实心图形
    CGContextFillPath(ctx);
}

3.绘制圆

/**
 * 画一个1/4圆
 */
- (void)drawRect:(CGRect)rect
{
    //获取图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //设置一个起点（和圆心一致）
    CGContextMoveToPoint(ctx, 100, 100);
    //添加一个线段到（100，150）
    CGContextAddLineToPoint(ctx, 100, 150);
    //添加一个圆弧
    CGContextAddArc(ctx, 100, 100, 50,M_PI_2,0,1);
    //关闭路径（连接起点和终点）
    CGContextClosePath(ctx);
    //设置颜色
    [[UIColor blueColor]set];
    //渲染空心图形
    CGContextStrokePath(ctx);
}

/**
 *  画一个完整的圆
 */
void drawCircle()
{
    //获取图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //画圆，设置圆所在的矩形框（当长宽一样时显示出来的就是一个圆，当长宽不一样时显示出来的就是一个椭圆）
    CGContextAddEllipseInRect(ctx, CGRectMake(50, 50, 100, 150));
    //设置线段的宽度，可以通过这种方式画出一个圆环
    CGContextSetLineWidth(ctx, 10);
    //渲染一个空心圆
    CGContextStrokePath(ctx);
}
void drawArc()
{
    //获取图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //画圆弧
    //x/y：圆心坐标点
    //startAngle:开始角度（以数学中的x,y坐标系，x的正方向为0度，x的负方向为180度，或者－180度，y的正方向为－90度，y的负方向为90度）
    //endAngle:结束角度
    //clockWise:圆弧的伸展方向（0:顺时针  1：逆时针）
    CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI, 1);
    //渲染图形
    CGContextFillPath(ctx);
}

4.绘制二次曲线

画曲线，通过画贝塞尔曲线实现的。需要设置3个点，当前点，结束点和中间控制点

/**
 *  画曲线
 */
void drawZui(CGContextRef ctx, CGRect rect)
{
    // 中间的控制点
    CGFloat controlX = rect.size.width * 0.5;
    CGFloat controlY = rect.size.height * 0.4;
    
    // 当前点
    CGFloat marginX = 20;
    CGFloat marginY = 10;
    CGFloat currentX = controlX - marginX;
    CGFloat currentY = controlY - marginY;
    CGContextMoveToPoint(ctx, currentX, currentY);
    
    // 结束点
    CGFloat endX = controlX + marginX;
    CGFloat endY = currentY;
    
    // 贝塞尔曲线
    CGContextAddQuadCurveToPoint(ctx, controlX, controlY, endX, endY);
    
    // 设置颜色
    [[UIColor blackColor] set];
    
    // 渲染
    CGContextStrokePath(ctx);
}