UIKit和Core Graphics绘图——字符串，线条，矩形，渐变

转自:http://blog.csdn.net/cocoarannie/article/details/9990411

概述

CoreGraphics也称为Quartz 2D 是UIKit下的主要绘图系统，频繁的用于绘制自定义视图。Core Graphics是高度集成于UIView和其他UIKit部分的。Core Graphics数据结构和函数可以通过前缀CG来识别。

视图可以通过子视图、图层或实现drawRect：方法来表现内容，如果说实现了drawRect：方法，那么最好就不要混用其他方法了，如图层和子视图。自定义绘图大部分是由UIKit或者Core Graphics来实现的。

2D绘图一般可以拆分成以下几个操作:

• 线条
• 路径
• 文本
• 图片
• 渐变

由于像素是依赖于目标的，所以2D绘图并不能操作单独的像素，我们可以从上下文（Context）读取它。

绘图就好比在画布上拿着画笔机械的进行画画，通过制定不同的参数来进行不同的绘制。

绘入字符串

调用NSString类里的实例方法drawAtPoint: withFont:方法可以进行绘制。

我们可以遍历设备支持的字体来随机选择一个，然后绘制到drawRect中。

[cpp] view plain copy

1. NSString *fontName = @"";  
2.       
3.     NSUInteger count1 = arc4random() % ([UIFont familyNames].count);  
4.     NSString *familyName = [UIFont familyNames][count1];  
5.     NSUInteger count2 = [UIFont fontNamesForFamilyName:familyName].count;  
6.     fontName = [UIFont fontNamesForFamilyName:familyName][arc4random() % count2];  
7.       
8.     UIFont *font = [UIFont fontWithName:fontName size:30.0f];  
9.     NSString *string = @"Core Graphics";  
10.     [string drawAtPoint:CGPointMake(30.0f, 100.0f) withFont:font];  

效果

绘制图片

绘制图片方法类似于绘入字符串，调用UIImage的实例方法drawAtPoint:或者drawInRect:来实现对图片的绘制，前者是从某点开始绘制，而后一个方法是在制定的矩形内进行绘制，会进行适当的缩放。

画线

线的画法比较简单，首先获取当前上下文，然后调用其设置线的相关信息，例如线条的宽度，起始点和终点等。

[cpp] view plain copy

1. //DrawingLine  
2. [[UIColor brownColor] set];       //设置上下文使用的颜色  
3. CGContextRef context = UIGraphicsGetCurrentContext();  
4.   
5. CGContextSetLineWidth(context, 2.0f);  
6. CGContextMoveToPoint(context, 30.0f, 150.0f);  // 画笔移动到某点  
7. CGContextAddLineToPoint(context, 290.0f, 150.0f);  
8. CGContextStrokePath(context);       //执行绘制  

效果如下

我们看到字的下面有了一条棕色的线。

连续绘制线条，并设置交界样式

上下文在绘制一条直线后会定格在刚才绘制的线的末端，这样我们可以再通过CGContextAddLineToPoint方法来设置立即进行下一条线的绘制。在线的交界处，我们可以设置交界的样式（CGLineJoin），这个枚举中有三种样式：

kCGLineJoinMiter——尖角

kCGLineJoinBevel——平角

kCGLineJoinRound——圆形

[cpp] view plain copy

1. //DrawingLinesContinuously  
2. CGContextSetLineWidth(context, 6.0f);  
3. CGContextSetLineJoin(context, kCGLineJoinRound);    //线条交汇处样式：圆角  
4. CGContextMoveToPoint(context, 20.0f, 150.0f);  
5. CGContextAddLineToPoint(context, 20.0f, 80.0f);  
6. CGContextAddLineToPoint(context, 290.0f, 80.0f);  
7. CGContextStrokePath(context);  

效果如下

我们也可以在绘制图像前和后来使用CGContextSaveGState(CGContextRef)和CGContextRestoreContext(CGContextRef)方法来保存和清除上下文的状态，这种实现类似于把相应内容推入栈中，然后调用Restore方法之后再全部推出，是上下文状态恢复到绘制之前。

绘制矩形

[cpp] view plain copy

1. //DrawingRect  
2. CGRect strokeRect = CGRectMake(25, 85, 263, 60);  
3. CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);  
4. CGContextSetLineWidth(context, 2.0f);  
5. CGContextStrokeRect(context, strokeRect);  

绘制完成后效果

然后可以调用CGContextFillRect（CGContextRef）方法来填充矩形

[cpp] view plain copy

1. //FillRect  
2. UIColor *clearRed = [UIColor colorWithRed:0.5 green:0.0 blue:0.0 alpha:0.2];  
3. CGContextSetFillColorWithColor(context, clearRed.CGColor);  
4. CGContextFillRect(context, strokeRect);  

效果

绘制线性渐变效果

绘制渐变效果首相要创建一个CGGradientRef，创建它需要调用一个方法CGGradientRef CGGradientCreateWithColors(
CGColorSpaceRef space,
CFArrayRef colors,
const CGFloat locations[]
);

需要一个色彩空间梯度，还有颜色的数组以及只读位置数组。

首先先把之前填充颜色的代码注释掉，然后开始绘制渐变。

[cpp] view plain copy

1. //DrawingGradient  
2. CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();  
3. NSArray *colors = @[(__bridge id)[UIColor colorWithRed:0.3 green:0.0 blue:0.0 alpha:0.2].CGColor,  
4.                     (__bridge id)[UIColor colorWithRed:0.0 green:0.0 blue:1.0 alpha:0.8].CGColor];  
5. const CGFloat locations[] = {0.0, 1.0};  
6.   
7. CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)colors, locations);  
8.   
9. CGPoint startPoint = CGPointMake(CGRectGetMinX(strokeRect), CGRectGetMinY(strokeRect)); //矩形最小x,y  
10. CGPoint endPoint = CGPointMake(CGRectGetMaxX(strokeRect), CGRectGetMaxY(strokeRect));   //矩形最大x,y  
11.   
12. CGContextSaveGState(context);  
13. CGContextAddRect(context, strokeRect);  
14. CGContextClip(context);  
15. CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0); //开始绘制  
16. CGContextRestoreGState(context);  
17.   
18. //释放资源  
19. CGGradientRelease(gradient);  
20. CGColorSpaceRelease(colorSpace);  

效果如下

这时背景的渐变效果就出来了。

以上为本篇文章全部内容，欢迎指正和交流。转载注明出处~