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);}