iOS上使用Quartz 2D绘制简单图形

时间：2021-09-03 00:20:22

转载自：http://blog.csdn.net/u014131398/article/details/38541481


绘制图形是通过重载UIView的 - ( void )drawRect:(CGRect )rect方法来实现的，所以首先需要一个继承自UIView的类，然后重写这个类的 - (void )drawRect:( CGRect )rect方法。当我们使用这个类的对象时，view显示时回调自身的drawRect方法，从而把我们会绘制在view上的东西呈现出来。 drawRect方法只有一个 CGRect  参数传入，这个值是view的frame。

   1、绘制直线： 

CGContextRef context = UIGraphicsGetCurrentContext();  //首先构建一个context，所有绘制都需要的
  CGContextSetLineWidth(context, 2.0);  //设置线条的宽度
  CGContextSetStrokeColorWithColor(context, [UIColor brownColor].CGColor); //设置线条的颜色
  
  CGContextMoveToPoint(context, 10, 10);     //移动到某个点
  CGContextAddLineToPoint(context, CGRectGetMaxX(rect)-10, 10); //添加一条线，后两个参数提供一个新的点的坐标，结合上面的点，构成一条线段的两端。
  
  CGContextStrokePath(context);   //最后，绘制整个路径，前面的一系列移动、添加线条、点之类的可以说提供了一个路径，然后通过这个方法，把路径绘制出来。
   

context,我的理解中，它是一个配置参数的集合，比如线条颜色、线条宽度，一直绘制过程的整个路径都包含在里面，它贯通了整个绘制的过程，把各个参数结合到一起。

   而绘制的过程，其实很形象，比如上面绘制线段，可以想象是一支笔，先移动到点（10，10），然后移动到（ CGRectGetMaxX(rect)- 10 , 10 ），但是方法是AddLine,也就是这个从一个点到另一个点得过程是构成一条线段的，就像是说你是按直线画过去的。

  2、绘制矩形：

   使用上面的绘制线段的方法当然可以拼接出一个矩形，但是矩形也有单独的方法。

CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextSetLineWidth(context, 2.0);
        CGContextSetStrokeColorWithColor(context, [UIColor brownColor].CGColor);

        CGContextAddRect(context, CGRectMake(10, 10, CGRectGetWidth(rect)-20, CGRectGetHeight(rect)-20));//就这一句话可以了，传入一个CGRect类型变量，提供矩形的范围，按这个范围画出矩形。

        CGContextStrokePath(context);

  3、绘制椭圆：

<span style="font-size:14px;">CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextSetLineWidth(context, 2.0);
        CGContextSetStrokeColorWithColor(context, [UIColor brownColor].CGColor);

        CGContextAddEllipseInRect(context, CGRectMake(10, 10, CGRectGetWidth(rect)-20, CGRectGetHeight(rect)-100));</span><pre name="code" class="objc"><span style="font-size:14px;">//这个方法同样只提供了一个CGRect变量，也就是一个矩形区域，绘制出的椭圆和这个矩形四边相切。</span><span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:12px;">椭圆的形状靠长短轴的大小可以确定下来，矩形的长宽提供了，而矩形的中心确定了椭圆的中心，这样椭圆就可以确定下来了。</span></span>
CGContextStrokePath(context);

4、绘制圆形：

CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextSetLineWidth(context, 2.0);
        CGContextSetStrokeColorWithColor(context, [UIColor brownColor].CGColor);
        CGContextAddArc(context, 160, 200, 100, M_PI/3.0, M_PI/2.0, 1);//绘制圆弧

        CGContextStrokePath(context);

CGContextAddArc   方法实际是一个绘制圆弧的方法，第一个参数传入context,第二个和第三个参数构成圆弧圆心的坐标，第四个参数是圆弧的半径，第五个参数是圆弧的开始角度，第六个参数是圆弧的结束角度，最后一个参数用来指定圆弧的方向，原本传入0是逆时针、1是顺时针，但是因为Quartz 2D的坐标系和UIView的坐标系是y轴相反的，所以1是逆时针、0是顺时针。跳帧传入的起始、结束角度可以画出完整的圆。

绘制圆弧还有一个方法：

CGContextMoveToPoint(context, 10, 10);  //提供一个当前所在点
        CGContextAddArcToPoint(context, 10, 160, 40, 160,100);//绘制圆弧

这里的思路是，首先有三个点，假设为A,B,C，然后连接A,B构成一条线，B,C连接构成另一条线，而且两线交于B点，然后就画一个圆弧分别与两条线相切，并且半径等于指定的半径。所以需要3个点和一个半径。CGContextAddArcToPoint 这个方法第二个和第三个参数提供一点B的坐标,第三个和第四个提供点C的坐标，而这是需要一个点A,当前点就是点A，所以需要一个当前点。

5、贝塞尔曲线：

CGContextAddCurveToPoint(CGContextRef c, CGFloat cp1x,
  CGFloat cp1y, CGFloat cp2x, CGFloat cp2y, CGFloat x, CGFloat y)

贝塞尔曲线需要提供四个点，曲线的两个端点以及分别靠近两个端点的两个控制点，同样在调用这个绘制曲线的方法时，也需要有一个当前点，这个当前点会作为曲线的一个端点。方法最后两个参数构成另外一个端点的坐标。然后第二、第三和第四、第五个参数分别构成两个控制点。控制点并不处在曲线上。通过调节控制点，可以调节曲线的样式，从而满足对于各种曲线的要求。

6、绘制虚线：

CGContextRef context = UIGraphicsGetCurrentContext();
  CGContextSetLineWidth(context, 2.0);
  const CGFloat lengths[] = {16.0f,6.0f,30.0f,40.0f};
  CGContextSetLineDash(context, 0, lengths, 4); //设置虚线的样式
  CGContextSetStrokeColorWithColor(context, [UIColor brownColor].CGColor);
  
  CGContextAddRect(context, CGRectMake(10, 10, CGRectGetWidth(rect)-20, CGRectGetHeight(rect)-20));
  
  CGContextStrokePath(context);
这里使用虚线绘制了一个矩形，虚线其实只需设置线条的属性即可，和上面说的图形绘制是两个不同方面的问题，可以同时使用。

对于虚线，关键的方法是

CGContextSetLineDash， 定义为： 

void CGContextSetLineDash (
   CGContextRef c,
   CGFloat phase,
const CGFloat lengths[],
   size_t count
);

lengths是一个float类型数组，count是数组里元素的数量。lengths指出了虚线的样式，例如

{16.0f,6.0f,30.0f,40.0f}

就是先长度为16的实线，然后空长度6，再是长度30的实线，再是空缺40长度，然后循环这个过程。


标签：

相关文章