绘制几何图形

12.2.2  绘制几何图形

从表12.2不难看出，Quartz 2D只提供了方法来绘制线段、矩形和椭圆，如果需要绘制更复杂的图形，则需要借助路径。下面的程序先使用这些方法来绘制几个简单的图形。

新建一个Single View Application，该应用包含应用程序委托类、视图控制器类和配套的S

Storyboard界面设计文件，本例无须修改应用程序委托和视图控制器类，只需要将Storyboard界面文件中最大的UIView控件类改为使用FKGeometryView自定义类即可。

FKGeometryView是由UIView派生出来的一个子类，我们将会重写drawRect:方法进行绘图，该控件类的实现部分如下。

程序清单：codes/12/12.2/GeometryShape/GeometryShape/FKGeometryView.m
 

 
 
@implementation FKGeometryView  
// 重写该方法进行绘图  
- (void)drawRect:(CGRect)rect  
{     
    CGContextRef ctx = UIGraphicsGetCurrentContext();  // 获取绘图上下文  
    CGContextSetLineWidth(ctx, 16);  // 设置线宽  
    CGContextSetRGBStrokeColor(ctx, 0 , 1, 0 , 1);  
    // ----------下面绘制3个线段测试端点形状-----------  
    // 定义4个点，绘制线段  
    const CGPoint points1[] =  {CGPointMake(10 , 20), CGPointMake(100 , 20)  
        ,CGPointMake(100 , 20) , CGPointMake(20, 50)};  
    CGContextStrokeLineSegments(ctx ,points1 , 4);  // 绘制线段（默认不绘制端点）      
    CGContextSetLineCap(ctx, kCGLineCapSquare);  // 设置线段的端点形状：方形端点  
    const CGPoint points2[] =  {CGPointMake(110 , 20), CGPointMake(200 , 20)  
        ,CGPointMake(200 , 20) , CGPointMake(120, 50)};  // 定义4个点，绘制线段  
    CGContextStrokeLineSegments(ctx ,points2 , 4);  // 绘制线段   
    CGContextSetLineCap(ctx, kCGLineCapRound);  // 设置线段的端点形状：圆形端点  
    const CGPoint points3[] =  {CGPointMake(210 , 20), CGPointMake(300 , 20)  
        ,CGPointMake(300 , 20) , CGPointMake(220, 50)};  // 定义4个点，绘制线段  
    CGContextStrokeLineSegments(ctx ,points3 , 4);  // 绘制线段  
    // ----------下面绘制3个线段测试点线模式-----------    
    CGContextSetLineCap(ctx, kCGLineCapButt);  // 设置线段的端点形状  
    CGContextSetLineWidth(ctx, 10);  // 设置线宽  
    CGFloat patterns1[] = {6 , 10};   
    CGContextSetLineDash(ctx , 0 , patterns1 , 1);  // 设置点线模式：实线宽6，间距宽10  
    const CGPoint points4[] = {CGPointMake(40 , 65), CGPointMake(280 , 65)};    // 定义两个点，绘制线段  
    CGContextStrokeLineSegments(ctx ,points4 , 2);  // 绘制线段  
    // 设置点线模式：实线宽6，间距宽10，但第1个实线宽为3  
    CGContextSetLineDash(ctx , 3 , patterns1 , 1);  
 
    // 定义两个点，绘制线段     
    const CGPoint points5[] = {CGPointMake(40 , 85), CGPointMake(280 , 85)};  
    CGContextStrokeLineSegments(ctx ,points5 , 2);  // 绘制线段  
    CGFloat patterns2[] = {5,1,4,1,3,1,2,1,1,1,1,2,1,3,1,4,1,5};      
    CGContextSetLineDash(ctx , 0 , patterns2 , 18);  // 设置点线模式  
    const CGPoint points6[] = {CGPointMake(40 , 105), CGPointMake(280 , 105)};  
    CGContextStrokeLineSegments(ctx ,points6 , 2);  // 绘制线段  
    // ---------下面填充矩形---------   
    // 设置线条颜色  
    CGContextSetStrokeColorWithColor(ctx, [UIColor blueColor].CGColor);   
    CGContextSetLineWidth(ctx, 14);  // 设置线条宽度  
    CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);  // 设置填充颜色  
    CGContextFillRect(ctx , CGRectMake(30 , 120 , 120 , 60));  // 填充一个矩形  
    // 设置填充颜色  
    CGContextSetFillColorWithColor(ctx, [UIColor yellowColor].CGColor);  
    CGContextFillRect(ctx, CGRectMake(80 , 160 , 120 , 60));  // 填充一个矩形  
    // ---------下面绘制矩形边框---------  
    CGContextSetLineDash(ctx, 0, 0, 0);  // 取消设置点线模式  
    CGContextStrokeRect(ctx, CGRectMake(30 , 230 , 120 , 60));  // 绘制一个矩形边框  
    // 设置线条颜色  
CGContextSetStrokeColorWithColor(ctx, [UIColor purpleColor].CGColor);   
    CGContextSetLineJoin(ctx, kCGLineJoinRound);  // 设置线条连接点的形状   
    CGContextStrokeRect(ctx , CGRectMake(80 , 260 , 120 , 60));  // 绘制一个矩形边框  
    CGContextSetRGBStrokeColor(ctx, 1.0, 0, 1.0 , 1.0);  // 设置线条颜色  
    CGContextSetLineJoin(ctx, kCGLineJoinBevel);  // 设置线条连接点的形状   
    CGContextStrokeRect(ctx , CGRectMake(130 , 290 , 120 , 60));  // 绘制一个矩形边框  
    CGContextSetRGBStrokeColor(ctx, 0, 1 , 1 , 1);  // 设置线条颜色  
    // ---------下面绘制和填充一个椭圆---------      
    // 绘制一个椭圆  
    CGContextStrokeEllipseInRect(ctx , CGRectMake(30 , 380 , 120 , 60));  
    CGContextSetRGBFillColor(ctx, 1, 0 , 1 , 1);  // 设置填充颜色  
    // 填充一个椭圆  
    CGContextFillEllipseInRect(ctx , CGRectMake(180 , 380 , 120 , 60));   
}  
@end  

程序中的前5行代码依次绘制了三组线段，分别测试不同的线条端点，其中第一组线段使用默认的端点风格：butt风格的端点；第二组线条使用方形端点风格：square风格的端点；第三组线条使用圆形端点风格：round风格的端点。

接下来的6行粗体字代码分别使用不同的点线模式绘制了三条横线。Quartz 2D支持功能丰富的点线模式，下一节会详细介绍Quartz 2D的点线模式。

接着的两行粗体字代码使用不同的颜色分别填充了两个矩形。

再接下来的6行粗体字代码绘制了三个矩形边框，第一个矩形边框使用了默认的连接点风格：meter风格；第二个矩形边框使用了round连接点风格；第三个矩形边框使用了bevel连接点风格。

最后的两行粗体字代码分别绘制了一个椭圆边框和填充了一个椭圆区域。

编译、运行该程序，将会看到如图12.2所示的效果。