IOS Quartz 2D 學習(2)

ccccshq 2014-11-12

展開全文

歡迎轉載，但是別落下東西。

iPhone繪制應用例子

　　這個教程中創(chuàng)建的應用包括一個子類化的UIView，覆寫了drawRect方法，用于演示2D操作。

創(chuàng)建新工程

　　創(chuàng)建一個基于視圖的IOS應用,（Single View Appliaction)。起名字叫draw2D。

創(chuàng)建UIView子類

　　Add -> New File.UIView ，起名為2DView，然后到ViewController.xib中修改view的類名稱為剛才創(chuàng)建的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);//這兩行創(chuàng)建顏色
   CGContextSetStrokeColorWithColor(context, color);//使用剛才創(chuàng)建好的顏色為上下文設置顏色
ps:創(chuàng)建顏色可以用下面代替,效果一樣

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

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

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

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

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

2. 畫path

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

下面代碼將創(chuàng)建一個菱形:

 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結構體中，并通過參數(shù)傳遞給CGContextAddRect()函數(shù)。

 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.繪制橢圓和圓

　　橢圓和圓的繪制是通過定義一個矩形區(qū)域，并且調用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.為路徑填充顏色

　　為路徑填充顏色的幾個函數(shù)

　　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() 函數(shù)繪制。

 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()來繪制。參數(shù)為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)

　　參數(shù):context:要描繪的上下文

　　　　 phase:一個float類型的點數(shù)據(jù)，表示在第一個虛線繪制的時候跳過多少個點

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

　　　　 count:數(shù)組長度

　　　　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需要指定坐標系統(tǒng)，或者縮放參數(shù)。

　　下面代碼將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 }