IOS Quartz 2D 學習(2)

本文轉載自查看原文 2012-08-14 00:13 8713

翻譯自http://www.techotopia.com/index.php/An_iPhone_Graphics_Drawing_Tutorial_using_Quartz_2D

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

iPhone繪制應用例子

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

創建新工程

　　創建一個基於視圖的IOS應用,（Single View Appliaction)。起名字叫draw2D。

創建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 }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 iOS 2D繪圖 (Quartz2D)之陰影和漸變(shadow，Gradient) ios 動畫與2D、3D繪圖 8年，從2D到3D，我的學習之路 CSS 3學習——transform 2D轉換 Shader學習筆記 05 - 2d火焰 IOS: Quartz2D圖像處理基於深度學習的2D和3D仿射變換配准基於Tensorflow平台的2D FCN圖像分割學習 Python：2D畫圖庫matplotlib學習總結 iOS開發UI篇—Quartz2D使用（圖片剪切）