IOS 畫圖 畫線

創建UIView子類

---

　　Add -> New File.UIView ，起名爲2DView，然後到ViewController.xib中修改view的類名稱爲剛纔創建的2DView.

 

覆寫drawRect方法

---

1. 畫線

1) CGContextRef context = UIGraphicsGetCurrentContext();//獲得當前view的圖形上下文(context)
 
2) CGContextSetLineWidth(context, 2.0);//制定了線的寬度


3) CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
   CGFloat components[] = {0.0, 0.0, 1.0, 1.0};//顏色元素
   CGColorRef color=CGColorCreate(colorspace,components);//這兩行創建顏色
   CGContextSetStrokeColorWithColor(context, color);//使用剛纔創建好的顏色爲上下文設置顏色
ps:創建顏色可以用下面代替,效果一樣

　　CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);

 
4) CGContextMoveToPoint(context, 0, 0);//設置線段的起始點
   CGContextAddLineToPoint(context, 300, 400);//設置線段的終點

 

　　上述代碼指定了線段的寬度、顏色、路徑,。接下來就要執行繪製操作，並且釋放顏色空間:

1 CGContextStrokePath(context);//繪製
2 CGColorSpaceRelease(colorspace);
3 CGColorRelease(color);

　　接下來執行！將會看到屏幕上有根藍色線段。

 

2. 畫path

---

　　你也許注意到了，上述畫線的時候，我們的路徑是通過兩個點來指定的。定義一個包含了很多點路徑可以使我們能夠繪製一些列的連接的直線段，通過重複調用CGContextAddLineToPoint()函數。曲線也可以被添加到一個形狀中，例如CGContextAddArc()；

下面代碼將創建一個菱形:

 1  CGContextRef context = UIGraphicsGetCurrentContext();
 2 
 3  CGContextSetLineWidth(context, 2.0);
 4 
 5  CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
 6 
 7   CGContextMoveToPoint(context, 100, 100);
 8   CGContextAddLineToPoint(context, 150, 150);
 9   CGContextAddLineToPoint(context, 100, 200);
10   CGContextAddLineToPoint(context, 50, 150);
11   CGContextAddLineToPoint(context, 100, 100);
12 
13   CGContextStrokePath(context);

 

3.畫矩形

---

　　矩形的繪製除了有一點與其他路徑繪製方法不同外，都相同。這一點是矩形的path（路徑）是通過x，y座標和寬高來指定的。這些信息存儲與CGRect結構體中，並通過參數傳遞給CGContextAddRect()函數。

 1  CGContextRef context = UIGraphicsGetCurrentContext();
 2 
 3  CGContextSetLineWidth(context, 2.0);
 4 
 5  CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
 6 
 7  CGRect rectangle = CGRectMake(60,170,200,80);
 8 
 9  CGContextAddRect(context, rectangle);
10 
11  CGContextStrokePath(context);

 

4.繪製橢圓和圓

---

　　橢圓和圓的繪製是通過定義一個矩形區域，並且調用CGContextAddEllipseInRect()來完成,想要畫圓的話，矩形寬高相同即可。

 1  CGContextRef context = UIGraphicsGetCurrentContext();
 2 
 3  CGContextSetLineWidth(context, 2.0);
 4 
 5  CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
 6 
 7  CGRect rectangle = CGRectMake(60,170,200,80);
 8 
 9  CGContextAddEllipseInRect(context, rectangle);
10 
11  CGContextStrokePath(context);

 

5.爲路徑填充顏色

---

　　爲路徑填充顏色的幾個函數

　　CGContextFillRect()  填充矩形 

　　CGContextFillEllipse()  填充橢圓

　　CGContextFillPath()  填充路徑

　　在填充之前首先要調用 CGContextSetFillColorWithColor()制定顏色。

　　下面代碼是用紅色填充了一段路徑:

 1  CGContextRef context = UIGraphicsGetCurrentContext();
 2 
 3  CGContextMoveToPoint(context, 100, 100);
 4  CGContextAddLineToPoint(context, 150, 150);
 5  CGContextAddLineToPoint(context, 100, 200);
 6  CGContextAddLineToPoint(context, 50, 150);
 7  CGContextAddLineToPoint(context, 100, 100);
 8 
 9  CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
10  CGContextFillPath(context);

　　下面代碼是填充一個藍色邊的紅色矩形。

1   CGContextRef context = UIGraphicsGetCurrentContext();
2 
3   CGContextSetLineWidth(context, 2.0);
4   CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
5   CGRect rectangle = CGRectMake(60,170,200,80);
6   CGContextAddRect(context, rectangle);
7   CGContextStrokePath(context);
8   CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
9   CGContextFillRect(context, rectangle);

 

 

6.畫弧

---

　　弧線的是通過指定兩個切點，還有角度，調用CGContextAddArcToPoint()繪製。

1 CGContextRef context = UIGraphicsGetCurrentContext();
2 
3 CGContextSetLineWidth(context, 2.0);
4 
5 CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
6 
7 CGContextMoveToPoint(context, 100, 100);
8 CGContextAddArcToPoint(context, 100,200, 300,200, 100);
9 CGContextStrokePath(context);

void CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1,
    CGFloat x2, CGFloat y2, CGFloat radius)

 

7.繪製貝茲曲線

---

　　貝茲曲線是通過移動一個起始點，然後通過兩個控制點,還有一個中止點，調用CGContextAddCurveToPoint() 函數繪製。

 1 CGContextRef context = UIGraphicsGetCurrentContext();
 2 
 3 CGContextSetLineWidth(context, 2.0);
 4 
 5 CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
 6 
 7 CGContextMoveToPoint(context, 10, 10);
 8 
 9 CGContextAddCurveToPoint(context, 0, 50, 300, 250, 300, 400);
10 
11 CGContextStrokePath(context);

1 /* Append a cubic Bezier curve from the current point to `(x,y)', with
2    control points `(cp1x, cp1y)' and `(cp2x, cp2y)'. */
3 void CGContextAddCurveToPoint(CGContextRef c,CGFloat cp1x,CGFloat cp1y, 
4 　　　　　　　　　　　　　　CGFloat cp2x, CGFloat cp2y, CGFloat x, CGFloat y)

 

8.繪製二次貝茲曲線

---

　　通過調用CGContextAddQuadCurveToPoint()來繪製。參數爲1個控制點，一箇中止點。

1 /* Append a quadratic curve from the current point to `(x, y)', with control
2    point `(cpx, cpy)'. */
3 
4  void CGContextAddQuadCurveToPoint(CGContextRef c, CGFloat cpx,
5     CGFloat cpy, CGFloat x, CGFloat y)

 1   CGContextRef context = UIGraphicsGetCurrentContext();
 2 
 3   CGContextSetLineWidth(context, 2.0);
 4 
 5   CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
 6 
 7   CGContextMoveToPoint(context, 10, 200);
 8 
 9   CGContextAddQuadCurveToPoint(context, 150, 10, 300, 200);
10 
11   CGContextStrokePath(context);

 

9.繪製虛線

---

　　通過CGContextSetLineDash()繪製：

 

/* Set the line dash patttern in the current graphics state of `c'. */void CGContextSetLineDash(CGContextRef c, CGFloat phase,
    const CGFloat lengths[], size_t count)

　　參數:context:要描繪的上下文

　　　　 phase:一個float類型的點數據，表示在第一個虛線繪製的時候跳過多少個點

 　　　　lengths:一個數組，指名了虛線如何虛實，比如，{5,6,4}代表，畫5個實，6個虛，4個實。

　　　　 count:數組長度

　　　　http://blog.csdn.net/zhangao0086/article/details/7234859這裏有詳細的講解，可以看下。

 1  CGContextRef context = UIGraphicsGetCurrentContext();
 2 
 3  CGContextSetLineWidth(context, 5.0);
 4 
 5  CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
 6 
 7  CGFloat dashArray[] = {2,6,4,2};
 8 
 9  CGContextSetLineDash(context, 3, dashArray, 4);//跳過3個再畫虛線，所以剛開始有6-（3-2）=5個虛點
10 
11  CGContextMoveToPoint(context, 10, 200);
12 
13  CGContextAddQuadCurveToPoint(context, 150, 10, 300, 200);
14 
15  CGContextStrokePath(context);

 

10.向Context繪製Image

---

　　繪製image需要指定座標系統，或者縮放參數。

　　下面代碼將Image繪製到(0,0)位置,全尺寸。

 1 - (void)drawRect:(CGRect)rect {
 2 
 3  CGContextRef context = UIGraphicsGetCurrentContext();
 4 
 5  UIImage *myImage = [UIImage imageNamed:@"imageName.jpg"];
 6 
 7  CGPoint imagePoint = CGPointMake(0, 0);
 8 
 9  [myImage drawAtPoint:imagePoint];
10 
11  [myImage release];
12 }

 

顯然這超過了屏幕大小，所以要讓圖片適應屏幕大小drawInRect（）：

 1 - (void)drawRect:(CGRect)rect {
 2 
 3  UIImage *myImage = [UIImage imageNamed:@"pumpkin.jpg"];
 4 
 5  CGRect imageRect = CGRectMake(10, 10, 300, 400);
 6 
 7  [myImage drawInRect:imageRect];
 8 
 9  [myImage release];
10 }