推送畫圖繪圖基礎(chǔ)quartz-2d

1、Quartz 2D繪圖千鋒iOS教學(xué)部學(xué)完今天的課程，你將掌握：常用2D繪圖函數(shù)2D繪圖的基本手法圖形編程的各種方法UIImageView顯示固定圖像UIImageView.startAnimating輪轉(zhuǎn)顯示多份圖像MediaPlayer顯示視頻Quartz顯示不固定的動(dòng)態(tài)圖像幾何圖形數(shù)據(jù)圖表股票曲線圖數(shù)據(jù)函數(shù)曲線高級(jí)動(dòng)畫效果Quartz 2D 繪圖iOS的2D繪圖函數(shù)庫(kù)純函數(shù)庫(kù)核心概念上下文（Context）： 一個(gè)UIView中的“畫布”路徑：畫布上的繪圖內(nèi)容線、輪廓、填充模式：繪圖狀態(tài)顏色、線型、填充、裁剪、alpha圖形上下文（Context）含義：當(dāng)前繪圖環(huán)境圖表上下文可以是以下類

2、型：UIView：用以向當(dāng)前窗口上繪圖UIImage：用以向一個(gè)UIImage對(duì)象繪圖PDF文件：用以向一個(gè)PDF文件繪圖最常用的是前兩種實(shí)例1：繪制簡(jiǎn)單圖形創(chuàng)建新工程：View-based application項(xiàng)目名稱：logo添加代碼- (void)viewDidLoad super viewDidLoad; UIGraphicsBeginImageContext(CGSizeMake(50, 50); CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextBeginPath(ctx); CGContextMoveToPoi

3、nt(ctx, 10, 10); CGContextAddArc(ctx, 10, 10, 10, 0, 2 * M_PI, YES); CGContextSetRGBFillColor(ctx, 0, 0, 0, 1); CGContextFillPath(ctx); UIImage *img = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); UIImageView *view = UIImageView alloc initWithImage:img; view.frame = CGRec

4、tMake(50, 50, 50, 50); self.view addSubview:view;效果繪圖函數(shù)的效果：函數(shù)講解UIGraphicsBeginImageContext創(chuàng)建一個(gè)基于UIImage的圖形上下文UIGraphicsGetCurrentContext取出“當(dāng)前”上下文 也就是在上一句中剛剛創(chuàng)建的上下文返回值為CGContextRef 類型CGContextBeginPath開始向上下文中增加路徑：即開始繪圖CGContextAddArc畫圓CGContextSetRGBFillColor設(shè)置填充顏色函數(shù)講解（續(xù)）CGContextFillPath填充一個(gè)區(qū)域UIGraph

5、icsGetImageFromCurrentImageContext從上下文中，取出UIImage對(duì)象UIGraphicsEndImageContext繪圖完畢，撤銷上下文CGContextAddArc解釋CGContextAddArc(CGContextRefc,CGFloatx,CGFloaty,CGFloatradius,CGFloatstartAngle,CGFloatendAngle,intclockwise)CGContextRef: 圖形上下文x,y: 開始畫的坐標(biāo)radius: 半徑startAngle, endAngle: 開始的弧度,結(jié)束的弧度clockwise: 畫的方向

6、(順時(shí)針,逆時(shí)針)練習(xí)：重復(fù)使用UIImage基于剛才的代碼，在屏幕上生成3行、3列提示繪圖過(guò)程不變UIImage可以多次使用答案- (void)viewDidLoad int i, j; super viewDidLoad; UIGraphicsBeginImageContext(CGSizeMake(50, 50); CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextBeginPath(ctx); CGContextMoveToPoint(ctx, 10, 10); CGContextAddArc(ctx, 10, 10,

7、 10, 0, 2 * M_PI, YES); CGContextSetRGBFillColor(ctx, 0, 0, 0, 1); CGContextFillPath(ctx); UIImage *img = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext();答案for (i = 0; i 3; i+) for (j = 0; j 3; j+) UIImageView *view = UIImageView alloc initWithImage:img;view.frame = CGRectMa

8、ke(i * 50, j * 50, 50, 50);self.view addSubview:view;view release; 體會(huì)：使用2D繪圖的優(yōu)勢(shì)比使用固定的圖片更靈活：可以方便的修改繪圖顏色、個(gè)數(shù)、大小、外觀練習(xí)：隨機(jī)圖形生成200個(gè)圓，隨機(jī)設(shè)置大小、顏色、位置畫餅圖PI/2 CGFloat x = 20.0f, y = 20.0f, radius = 20.0f; CGContextBeginPath(ctx); CGContextMoveToPoint(ctx, x, y); / 必須 CGContextAddArc(ctx, x, y, radius, 0, -M_PI/2

9、.0f, YES); CGContextSetRGBFillColor(ctx, 0, 0, 0, 1); CGContextFillPath(ctx);附注：“圖形上下文”的深入理解iOS中，圖形上下文是堆棧結(jié)構(gòu)每次使用UIGraphicsBeginImageContext新建的圖形上下文位于堆棧頂端UIGraphicsGetCurrentContext就是取出當(dāng)前棧頂元素，也就是返回最后一次新建的上下文UIGraphicsEndImageContext就是去除當(dāng)前棧頂元素，也就是撤銷最后一次建立的上下文繪圖函數(shù)CGContext各種形狀函數(shù)參數(shù)說(shuō)明CGContextAddArcctx, x

10、, y, 半徑, 起始角度，結(jié)束角度，順時(shí)針/逆時(shí)針畫圓弧CGContextAddRectctx, CGRect畫矩形CGContextFillRectctx, CGRect畫實(shí)心矩形CGContextMoveToPointCGContextAddLineToPointctx, x1, y1ctx, x2, y2畫直線顏色兩種顏色筆劃顏色填充顏色函數(shù)參數(shù)說(shuō)明CGContextSetRGBStrokeColorctx, red, green, blue, alpha設(shè)置筆劃顏色CGContextSetRGBFillColorctx, red, green, blue, alpha設(shè)置填充顏色線型

11、畫線的形狀：線的寬度函數(shù)參數(shù)說(shuō)明CGContextSetLineWidthctx, width設(shè)置畫線的寬度練習(xí)：畫車標(biāo)代碼- (void) cars UIGraphicsBeginImageContext(CGSizeMake(200, 200);CGContextRef ctx = UIGraphicsGetCurrentContext();CGContextSetRGBFillColor(ctx, 1, 0, 0, 0.5);CGContextSetRGBStrokeColor(ctx, 1, 1, 0, 1);CGContextSetLineWidth(ctx, 5.0);/* 背景

12、*/CGContextFillRect(ctx, CGRectMake(0, 0, 200, 200);/* 邊框 */CGContextAddRect(ctx, CGRectMake(0, 0, 200, 200);代碼/* “H”形狀 */CGContextMoveToPoint(ctx, 60, 0);CGContextAddLineToPoint(ctx, 60, 200);CGContextMoveToPoint(ctx, 140, 0);CGContextAddLineToPoint(ctx, 140, 200);CGContextMoveToPoint(ctx, 60, 100)

13、;CGContextAddLineToPoint(ctx, 140, 100);CGContextStrokePath(ctx);UIImage *img = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();UIImageView *view = UIImageView alloc initWithImage:img autorelease;view.frame = CGRectMake(100, 100, 200, 200);self.view addSubview:view;練習(xí)：畫一個(gè)國(guó)際象棋

14、盤提示：畫8x8個(gè)矩形代碼for (i = 0; i 8; i+)for (j = 0; j 8; j+)if (i % 2) = (j % 2)CGContextSetRGBFillColor(ctx, 0, 0, 0, 1);else CGContextSetRGBFillColor(ctx, 1, 1, 1, 1);CGContextFillRect(ctx, CGRectMake(i * 30, j * 30, 30, 30);練習(xí)：畫象棋盤深入理解：路徑CGPathRef繪圖的過(guò)程 創(chuàng)建新路徑畫圖：移動(dòng)畫筆添加各種路徑結(jié)束路徑噴漆上色輪廓內(nèi)部路徑路徑 要繪制的內(nèi)容，是一組連續(xù)的形狀線

15、段圓弧矩形噴漆上色輪廓填充內(nèi)部函數(shù)參數(shù)說(shuō)明CGContextStrokePathctx繪制輪廓CGContextFillPathctx繪制內(nèi)部練習(xí)：直方圖提示：背景兩條直線三個(gè)矩形核心代碼/* 背景 */CGContextSetRGBFillColor(ctx, 0, 0.2, 0, 0.5);CGContextFillRect(ctx, CGRectMake(0, 0, 300, 240);CGContextSetRGBStrokeColor(ctx, 0, 0, 0, 1);/* y軸 */CGContextMoveToPoint(ctx, 10, 20);CGContextAddLine

16、ToPoint(ctx, 10, 220);/* x軸 */CGContextMoveToPoint(ctx, 10, 220);CGContextAddLineToPoint(ctx, 290, 220);CGContextStrokePath(ctx);核心代碼/* 方柱：3個(gè) */CGContextSetRGBFillColor(ctx, 0, 0.8, 0.1, 0.5);CGContextFillRect(ctx, CGRectMake(40, 120, 50, 100);CGContextSetRGBFillColor(ctx, 0.9, 0.2, 0.1, 0.5);CGCont

17、extFillRect(ctx, CGRectMake(120, 160, 50, 60);CGContextSetRGBFillColor(ctx, 0.2, 0.4, 0.9, 0.5);CGContextFillRect(ctx, CGRectMake(200, 50, 50, 170);繪制文字Text主要函數(shù)文字顏色：使用CGContextSetRGBFillColor設(shè)置函數(shù)參數(shù)說(shuō)明CGContextSelectFontctx, font_name, size, encoding選擇字體CGContextShowTextAtPointctx, x, y, str, len繪制字體練

18、習(xí)：給直方圖加上標(biāo)題CGContextSetRGBFillColor(ctx, 1, 1, 1, 1);CGContextSelectFont(ctx, Helvetica, 20, kCGEncodingMacRoman);CGContextShowTextAtPoint(ctx, 60, 20, Marketing Plan, 14);問(wèn)題：文字是倒置的？注意：文字坐標(biāo)變換文字繪圖并不使用iPhone的坐標(biāo)系統(tǒng)，而是以倒置的方式計(jì)算坐標(biāo)解決：坐標(biāo)變換將y軸變換為向下方向：CGAffineTransform flip = CGAffineTransformMake(1, 0, 0, -1,

19、0, 0); CGContextSetTextMatrix(ctx, flip);完整的文字繪圖代碼CGContextSetRGBFillColor(ctx, 1, 1, 1, 1);CGContextSelectFont(ctx, Helvetica, 20, kCGEncodingMacRoman);CGAffineTransform flip = CGAffineTransformMake(1, 0, 0, -1, 0, 0);CGContextSetTextMatrix(ctx, flip);CGContextShowTextAtPoint(ctx, 60, 20, Marketing

20、 Plan, 14);文字標(biāo)題正常！仿射變換AffineTransform已知坐標(biāo)點(diǎn)A,變換后新坐標(biāo)系中坐標(biāo)為B ,則有:B = AMA為1*3的矩陣x,y,1B為 1* 3的矩陣x,y,1M為3*3仿射矩陣單位矩陣/* The identity transform: 1 0 0 1 0 0 . */const CGAffineTransform CGAffineTransformIdentity平移矩陣t = 1 0 0 1 tx ty CGAffineTransform CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty);縮放矩陣t = sx 0 0 sy 0 0 */CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)旋轉(zhuǎn)矩陣t = cos(angle) sin(angle) -sin(angle) cos(angle) 0 0 CGAffineTransform CG