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

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

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

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

图形上下文

x,y: 弧线的原点坐标

半径

开始的弧度,结束的弧度

画弧线的方向(0是逆时针,1是顺时针)

注意弧度的正负永远是我们学习数学时的认识,即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);
     
 }



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