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

时间:2021-12-06 22:16:48

转载自: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长度,然后循环这个过程。