iOS中drawRect方法实现画圆角矩形，顺时针和逆时针

http://blog.csdn.net/xiangzi_011/article/details/25420799

在iOS中创建自己独特的UIView，需要从UIView继承一个子类，然后重写drawRect方法，里面用GC画自己想要的效果即可。我们这里实现一个圆角矩形的绘制。

例子引用了这篇博客的代码：http://cocoa.venj.me/blog/draw-round-rectangle-with-quartz-on-ios/

注意在画圆弧的时候，用到了CGContextAddArc方法，

CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius,CGFloat startAngle, CGFloatendAngle, int clockwise)

CGContextRef: 图形上下文

x,y: 弧线的原点坐标

radius: 半径

startAngle, endAngle: 开始的弧度,结束的弧度

clockwise: 画弧线的方向(0是逆时针，1是顺时针)

这个方法使用起来还是比较容易混乱的，完全是因为在iOS中y坐标系是进行了反转的，坐标原点在左上角，向下是增长方向（书本上的坐标系y轴方向向上）。注意弧度的正负永远是我们学习数学时的认识，即y坐标系方向向上，x坐标系方向向右，角度是逆时针方向为正。不管顺时针还是逆时针画，最后都是要沿着y坐标系进行一次镜像反转。

好了，直接上代码，先逆时针方向，注意为了更好的坐标点的衔接，逆时针时先画线，再画弧线。从左上角(radius,0)点开始画。

 - (void)drawRect:(CGRect)rect

 {

     CGFloat width = rect.size.width;

     CGFloat height = rect.size.height;

     // 简便起见，这里把圆角半径设置为长和宽平均值的1/10

     CGFloat radius = (width + height) * 0.05;

     

     // 获取CGContext，注意UIKit里用的是一个专门的函数

     CGContextRef context =UIGraphicsGetCurrentContext();

     // 移动到初始点

     CGContextMoveToPoint(context, radius, 0);

     

     // 绘制第1条线和第1个1/4圆弧，右上圆弧

     CGContextAddLineToPoint(context, width - radius,0);

     CGContextAddArc(context, width - radius, radius, radius, -0.5 *M_PI,0.0,0);

     

     // 绘制第2条线和第2个1/4圆弧，右下圆弧

     CGContextAddLineToPoint(context, width, height - radius);

     CGContextAddArc(context, width - radius, height - radius, radius,0.0,0.5 *M_PI,0);

     

     // 绘制第3条线和第3个1/4圆弧，左下圆弧

     CGContextAddLineToPoint(context, radius, height);

     CGContextAddArc(context, radius, height - radius, radius,0.5 *M_PI,M_PI,0);

     

     // 绘制第4条线和第4个1/4圆弧，左上圆弧

     CGContextAddLineToPoint(context, 0, radius);

     CGContextAddArc(context, radius, radius, radius,M_PI,1.5 *M_PI,0);

     

     // 闭合路径

     CGContextClosePath(context);

     // 填充半透明红色

     CGContextSetRGBFillColor(context,1.0,0.0,0.0,0.5);

     CGContextDrawPath(context,kCGPathFill);

     

 }

下面是顺时针方向的实现，注意这时候是先画弧线，再画直线，另外注意CGContextAddArc方法中start弧度和end弧度以及原点的变化。这里也是从左上角(radius,0)点开始画。

- (void)drawRect:(CGRect)rect

{

    CGFloat width = rect.size.width;

    CGFloat height = rect.size.height;

    // 简便起见，这里把圆角半径设置为长和宽平均值的1/10

    CGFloat radius = (width + height) * 0.05;

    

    // 获取CGContext，注意UIKit里用的是一个专门的函数

    CGContextRef context =UIGraphicsGetCurrentContext();

    // 移动到初始点

    CGContextMoveToPoint(context, radius, 0);

    

    // 绘制第1个1/4圆弧和第1条线,左上圆弧

    CGContextAddArc(context, radius, radius, radius,1.5 *M_PI,M_PI,1);

    CGContextAddLineToPoint(context, 0, height - radius);

    

    // 绘制第2个1/4圆弧和第2条线，左下圆弧

    CGContextAddArc(context, radius, height - radius, radius,M_PI,0.5 *M_PI,1);

    CGContextAddLineToPoint(context, width - radius, height);

    

    // 绘制第3个1/4圆弧和第3条线，右下圆弧

    CGContextAddArc(context, width - radius, height - radius, radius,0.5 *M_PI,0,1);

    CGContextAddLineToPoint(context, width,height - radius);

    

    // 绘制第4个1/4圆弧和第4条线,右上圆弧

    CGContextAddArc(context, width - radius, radius, radius,0, -0.5 *M_PI,1);

    CGContextAddLineToPoint(context, radius,0);

    

    // 闭合路径

    CGContextClosePath(context);

    // 填充半透明红色

    CGContextSetRGBFillColor(context,1.0,0.0,0.0,0.5);

    CGContextDrawPath(context,kCGPathFill);

    

}

希望上面的代码能帮助大家顺便理解圆弧的使用。