绘图(CoreGraphics)

CCAdmin

绘图操作必须在 - (void)drawRect:\(CGRect)rect 函数进行，即要重写父类的此方法。
本文绘图内容:

• 线条/虚线
• 长方形/正方形
• 椭圆/圆
• 三角形
• 五角星
  

Objective-C 版本

1. 
   
2. [list][*](void)drawRect:(CGRect)rect {[/list]
   
3.    
   
4.     // 获取绘图上下文
   
5.     CGContextRef context = UIGraphicsGetCurrentContext();
   
6.     if (!context) {
   
7.         
   
8.         NSLog(@"获取绘图context失败");
   
9.         return;
   
10.     }
    
11.    
    
12.     /** ==== 对context进行基本设置 */
    
13.     CGContextSetLineWidth(context, 2);  // 数值越大，绘出来的路径越大
    
14.     CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor); // 路径颜色
    
15.     CGContextSetLineCap(context, kCGLineCapRound);   // 路径起点/终点处显示风格
    
16.     CGContextSetLineJoin(context, kCGLineJoinRound); // 路径连接(拐弯)处显示风格
    
17.     // 画一条直线
    
18.     CGContextMoveToPoint(context, 50, 40);
    
19.     CGContextAddLineToPoint(context, 250, 40);
    
20.     CGContextStrokePath(context); // 输出到屏幕上
    
21.    
    
22.     // 画一个正方形/长方形,并输出到屏幕上
    
23.     CGContextStrokeRect(context, CGRectMake(50, 50, 100, 50));   // 长方形
    
24.     CGContextStrokeRect(context, CGRectMake(200, 50, 100, 100)); // 正方形
    
25.    
    
26.     // 画一个椭圆/圆形,并输出到屏幕上
    
27.     CGContextStrokeEllipseInRect(context, CGRectMake(50, 160, 100, 50)); // 椭圆
    
28.     CGContextStrokeEllipseInRect(context, CGRectMake(220, 160, 100, 100)); // 圆
    
29.    
    
30.     // 画一个三角形
    
31.     CGPoint points[4];
    
32.     points[0] = CGPointMake(40, 300);
    
33.     points[1] = CGPointMake(80, 220);
    
34.     points[2] = CGPointMake(120, 300);
    
35.     points[3] = CGPointMake(40, 300);
    
36.    
    
37.     CGContextAddLines(context, points, 4);
    
38.     CGContextStrokePath(context); // 输出到屏幕上
    
39.    
    
40.     // 画一条虚线
    
41.     CGFloat lengths[] = {5, 10};
    
42.     CGContextSetLineDash(context, 0, lengths, 2);
    
43.     CGContextMoveToPoint(context, 50, 320);
    
44.     CGContextAddLineToPoint(context, 250, 320);
    
45.     CGContextStrokePath(context); // 输出到屏幕上
    
46.    
    
47.     // 画个五角星(需要到圆、三角函数的知识，忘记数学知识的话，先去温习一下)
    
48.     CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
    
49.     CGPoint centerPoint=CGPointMake(160, 430);  // 确定中心点
    
50.     CGFloat radius=50.0;                        // 确定半径
    
51.     CGPoint point1=CGPointMake(centerPoint.x, centerPoint.y-radius); // 五角星到顶点
    
52.     CGContextMoveToPoint(context, point1.x, point1.y);
    
53.    
    
54.     //五角星每个点之间点夹角，采用弧度计算。每两个点进行连线就可以画出五角星
    
55.     //点与点之间点夹角为2*M_PI/5.0，
    
56.     CGFloat angle=4*M_PI/5.0;
    
57.     for (int i=1; i<=5; i++) {
    
58.         
    
59.         CGFloat x=centerPoint.x-sinf(i*angle)*radius;
    
60.         CGFloat y=centerPoint.y-cosf(i*angle)*radius;
    
61.         CGContextAddLineToPoint(context, x, y);
    
62.     }
    
63.    
    
64.     // 输出到屏幕上
    
65.     CGContextDrawPath(context, kCGPathFill);        // 只填充
    
66.     //CGContextDrawPath(context, kCGPathEOFill);    // 只填充(但闭合路径重叠的地方除外)
    
67.     //CGContextDrawPath(context, kCGPathStroke);    // 只显示路径
    
68.     //CGContextDrawPath(context, kCGPathFillStroke);// 填充并显示路径
    
69.     //CGContextDrawPath(context, kCGPathEOFillStroke);// 填充(但闭合路径重叠的地方除外)并显示路径
    
70. }
    

复制代码

Swift 版本

1. 
   
2. comeing soon
   

复制代码

效果图