Quartz 2D基本绘图

标签：quartz   图片   图形   core graphics   

上一节中，我引用别人的文章，详细的讲解了Quartz 2D的基本概念。想了解的，请点击这里。这一节用几个小Demo，来说明Quartz 2D的绘图功能。 

1. 我们先定义一个用来绘图的View（DrawView，它继承自UIView），并准备在下面的方法中实现绘图工作。

- (void)drawRect:(CGRect)rect;

首先，我们来绘制线段，三角形和矩形。

1. 线段：在drawRect:方法中，写入以下代码：

CGContextRef ccr = UIGraphicsGetCurrentContext();

    CGContextSetLineWidth(ccr, 5);

    CGContextSetLineCap(ccr, kCGLineCapRound);
   
    [[UIColor greenColor] setStroke];
    
    CGContextMoveToPoint(ccr, 10, 10);
    
    CGContextAddLineToPoint(ccr, 150, 150);
    
    CGContextStrokePath(ccr);
    
    
    [[UIColor blueColor] set];
    
    CGContextSetLineJoin(ccr, kCGLineJoinRound);
    
    CGContextMoveToPoint(ccr, 200  , 200);
    
    CGContextAddLineToPoint(ccr, 180, 40);
    CGContextAddLineToPoint(ccr, 100, 100);
    
    CGContextStrokePath(ccr);
    
    CGContextRelease(ccr);

CGContextSetLineWidth方法用于设置线宽。

CGContextSetLineCap 用来设置线的两端显示效果, 它是一个枚举，我们可以自己选择效果。

enum CGLineCap {
    kCGLineCapButt,
    kCGLineCapRound,
    kCGLineCapSquare
};
typedef enum CGLineCap CGLineCap;

方法一：

CGContextSetRGBStrokeColor(context, r, g, b, a);

方法二：

[UIColor redColor] setStroke]; 

方法三：

[UIColor redColor] set]; 

setStroke 只针对边框，set不管是边框还是内部，全部填充。

CGContextMoveToPoint 方法，表明绘制的起点。

CGContextAddLineToPoint 方法， 表明绘制的终点。

CGContextStrokePath 方法，用什么样的方式开始绘制路径。

CGContextSetLineJoin 方法，设置线段交界处的样式。

enum CGLineJoin {
    kCGLineJoinMiter,
    kCGLineJoinRound,
    kCGLineJoinBevel
};
typedef enum CGLineJoin CGLineJoin;

最终效果图：

2. 三角形：在drawRect:方法中，写入以下代码：

CGContextRef ccr = UIGraphicsGetCurrentContext();
    
    CGContextMoveToPoint(ccr, 10, 10);
    CGContextAddLineToPoint(ccr, 150, 150);
    CGContextAddLineToPoint(ccr, 180, 40);
    CGContextClosePath(ccr);
    // 空心
    //CGContextStrokePath(ccr);
    // 实心
    CGContextFillPath(ccr);
    
    CGContextRelease(ccr);

3. 矩形：在drawRect:方法中，写入以下代码：

CGContextRef ccr = UIGraphicsGetCurrentContext();
    
    CGContextAddRect(ccr, CGRectMake(10, 10, 100, 100));
    
    CGContextStrokePath(ccr);
    
    CGContextRelease(ccr);

4. 椭圆：在drawRect:方法中，写入以下代码：

CGContextRef ccr = UIGraphicsGetCurrentContext();
    
    // 椭圆
    CGContextAddEllipseInRect(ccr, CGRectMake(20, 20, 100, 100));
    
    // 通过设置圆的线宽可以实现圆环
    CGContextSetLineWidth(ccr, 10);
    
    CGContextAddEllipseInRect(ccr, CGRectMake(160, 20, 40, 100));
    
    // 通过设置圆的线宽可以实现圆环
    CGContextSetLineWidth(ccr, 5);
    
    CGContextStrokePath(ccr);
    
    CGContextRelease(ccr);

5. 圆弧：在drawRect:方法中，写入以下代码：

CGContextRef ccr = UIGraphicsGetCurrentContext();
    
    CGContextMoveToPoint(ccr, 100, 100);
    CGContextAddLineToPoint(ccr, 100, 150);
    
    CGContextAddArc(ccr, 100, 100, 50, M_PI_2, M_PI*1.8, 0);
    CGContextClosePath(ccr);
    
    [[UIColor redColor] set];
    
    CGContextFillPath(ccr);
    
    CGContextRelease(ccr);

6. 绘制文字和图片：在drawRect:方法中，写入以下代码：

- (void)drawText {
    NSString *str = @"I love you";
    
    NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
    attrs[NSForegroundColorAttributeName] = [UIColor blueColor];
    attrs[NSFontAttributeName] = [UIFont systemFontOfSize:18];
    
    [str drawAtPoint:CGPointMake(50, 50) withAttributes:attrs];
}

- (void)drawImage {
    UIImage *image = [UIImage imageNamed:@"me"];
    [image drawAtPoint:CGPointZero];
}

Quartz 2D基本绘图

标签：quartz   图片   图形   core graphics   

原文地址：http://blog.csdn.net/sinat_27706697/article/details/45949473