[课堂实践与项目]Quartz2D基础篇： 直线，image，圆形，举行，三角形的绘制

另一篇关于绘图的博文http://blog.youkuaiyun.com/ministarler/article/details/16993185

关于Quartz2D的学习，从画出简单的形状和加载image开始。

1.配置画图的步骤

1. 导入图画包 QuartzCore.framework
2. 新建View视图，并在 drawRect：(CGRect)rect 中设置相应饿属性
3. 设置绘图上下文：self.context = UIGraphicsGetCurrentContext();
4. 设置所要绘制的对象：文字，直线，矩形，圆，三角形 等

2.对对象进行详细的说明。

1. 文字：

- (void)drawRect:(CGRect)rect
{
    self.context = UIGraphicsGetCurrentContext();
    //设置颜色
    UIColor *color = [UIColor colorWithRed:1.0 green:0.5 blue:0 alpha:1];
    [color set];
    //要绘制的字符串
    NSString *pStr = @"HelloWorld 你好";
    //设置字体，字号
    UIFont *font = [UIFont fontWithName:@"HelveticaNeue-Bold" size:38];
    //绘制
    [pStr drawAtPoint:CGPointMake(50, 20) withFont:font];
    //设置一个区域
    CGRect rect1 = CGRectMake(100, 70, 110, 120);
    //在矩形内绘制
    [pStr drawInRect:rect1 withFont:font];
    
    // Drawing code
}

2.image

- (void)drawRect:(CGRect)rect
{
    self.context = UIGraphicsGetCurrentContext();
 
    UIImage *image = [UIImage imageNamed:@"1"];
    
    //设置绘制的顶点
    [image drawAtPoint:CGPointMake(100, 100)];
    //设置绘制的区域
    [image drawInRect:CGRectMake(100, 100, 100, 300)];
    // Drawing code
}

3.获取颜色的组成 RGBA

- (void)drawRect:(CGRect)rect
{
    self.context = UIGraphicsGetCurrentContext();
 
    //创建一个对象
    UIColor *color = [UIColor colorWithRed:0.5 green:0.7 blue:0.1 alpha:1];
    //获取ColorRef
    CGColorRef cgColor = [color CGColor];
    //通过颜色上下文获取一个CGFloat对象
    const CGFloat *colorComents = CGColorGetComponents(cgColor);
    //获取颜色组成部分
    NSUInteger componentCount = CGColorGetNumberOfComponents(cgColor);
    //循环输出颜色组成
    for (int i = 0; i < componentCount; i++)
    {
        NSLog(@"%.2f",colorComents[i]);
    }
}

2013-12-23 16:39:32.041画图[4252:a0b] 0.50

2013-12-23 16:39:32.042画图[4252:a0b] 0.70

2013-12-23 16:39:32.042画图[4252:a0b] 0.10

2013-12-23 16:39:32.043画图[4252:a0b] 1.00

4.矩形的设置

- (void)drawRect:(CGRect)rect
{
    self.context = UIGraphicsGetCurrentContext();
 
    CGMutablePathRef path = CGPathCreateMutable();
    CGRect rect1 = CGRectMake(10, 310, 50, 140);  //设置矩形
    //将区域加进路径中
    CGPathAddRect(path, nil, rect1);
    //获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    //给矩形设置阴影
    CGContextSetShadowWithColor(context, CGSizeMake(10, 10), 20, [[UIColor blackColor]CGColor]);
    //将路径添加到上下文
    CGContextAddPath(context, path);
    
    //设置填充色
    [[UIColor colorWithRed:0.2 green:0.6 blue:0.8 alpha:1.0]setFill];
    //边线颜色
    [[UIColor brownColor]setStroke];
    //设置线条宽度
    CGContextSetLineWidth(context, 5.0);
    //在设置好的路径绘制
    CGContextDrawPath(context, kCGPathFillStroke);
}

5.直线的绘制

CGPoint point = CGPointMake(320, 480);
    self.context = UIGraphicsGetCurrentContext();
 
    //设置线条颜色
    [[UIColor blueColor]set];
    //获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    //设置起始点
    CGContextMoveToPoint(context, 10, 20);
    //添加线条，设置终止点
    CGContextAddLineToPoint(context, point.x, point.y);
    //连续画线条
    CGContextAddLineToPoint(context, 100, 50);
    
    //连续画线条
    CGContextAddLineToPoint(context, 10, 50);
    //设置线条宽度
    CGContextSetLineWidth(context, 15.0);
    //设置连接处的样式kCGLineJoinRound,kCGLineJoinMiter,kCGLineJoinBevel
    CGContextSetLineJoin(context, kCGLineJoinMiter);
    //闭合路径
    CGContextStrokePath(context);

6。圆形的绘制

- (void)drawRect:(CGRect)rect
{
    //获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    //根据上下文开始路径
    CGContextBeginPath(context);
    //设置绘制弧形的参数
    
    CGContextAddArc(context, 260, 130, 40, 0, 2*M_PI,1);
    //设置绘制线条颜色
    CGContextSetRGBFillColor(context, 1, 0, 0, 1);
    //闭合路径
    CGContextFillPath(context);
}

7.任意三角形的绘制：思路：首先根据我们的触摸点  选中最后三个point，进行绘制。

要注意 touchend事件最后的  【self setNeedDisplay】方法。这个方法是重绘view，调用drawRect：方法

//通过触摸方法进行操作
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    //触摸产生对象
    UITouch *touch = [touches anyObject];
    //当前触摸点
    CGPoint point = [touch locationInView:self];
    [pointArray addObject:[NSValue valueWithCGPoint:point]];
    
    //只存储3个触摸点
    if (pointArray.count > 3) {
        [pointArray removeObjectAtIndex:0];
    }
    //如果刚好存储三个点,就获取三个CGPoint的值,涉及到一个转换,NSArray只能存放对象
    if (pointArray.count == 3) {
        firstPoint = [[pointArray objectAtIndex:0]CGPointValue];
        secondPoint = [[pointArray objectAtIndex:1]CGPointValue];
        thirdPoint = [[pointArray objectAtIndex:2]CGPointValue];
    }
    //关键方法,重新加载drawRect方法
    [self setNeedsDisplay];    
}

drawrect方法的重绘。我们选择了绘制 lines的方法。在一个集合中绘制，并且设置了闭合路径。

 CGContextRef context = UIGraphicsGetCurrentContext();
    //初始化数组
    CGPoint addLines[]=
    {
        firstPoint,secondPoint,thirdPoint,firstPoint,
    };
    //开始画线条
    /* Add a set of lines to the context's path. */
    CGContextAddLines(context, addLines, sizeof(addLines)/sizeof(addLines[0]));
    
    //闭合路径
    CGContextStrokePath(context);