版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
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ù)庫純函數(shù)庫核心概念上下文(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列提示繪圖過程不變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ù)說明CGContextAddArcctx, x
10、, y, 半徑, 起始角度,結(jié)束角度,順時(shí)針/逆時(shí)針畫圓弧CGContextAddRectctx, CGRect畫矩形CGContextFillRectctx, CGRect畫實(shí)心矩形CGContextMoveToPointCGContextAddLineToPointctx, x1, y1ctx, x2, y2畫直線顏色兩種顏色筆劃顏色填充顏色函數(shù)參數(shù)說明CGContextSetRGBStrokeColorctx, red, green, blue, alpha設(shè)置筆劃顏色CGContextSetRGBFillColorctx, red, green, blue, alpha設(shè)置填充顏色線型
11、畫線的形狀:線的寬度函數(shù)參數(shù)說明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è)國際象棋
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繪圖的過程 創(chuàng)建新路徑畫圖:移動(dòng)畫筆添加各種路徑結(jié)束路徑噴漆上色輪廓內(nèi)部路徑路徑 要繪制的內(nèi)容,是一組連續(xù)的形狀線
15、段圓弧矩形噴漆上色輪廓填充內(nèi)部函數(shù)參數(shù)說明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ù)說明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);問題:文字是倒置的?注意:文字坐標(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
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- DB2102T 0104-2024 碼頭無人值守汽車衡物聯(lián)網(wǎng)消息傳輸規(guī)程
- 浙江省杭州市2016年中考數(shù)學(xué)試卷(含答案)
- 2024年學(xué)校工作計(jì)劃
- 《 美術(shù)館(博物館)物業(yè)管理服務(wù)規(guī)范》編制說明
- 山東南山集團(tuán)東海外國語校2024年中考數(shù)學(xué)對(duì)點(diǎn)突破模擬試卷含解析
- 保定學(xué)院《會(huì)展安全與危機(jī)管理》2023-2024學(xué)年第一學(xué)期期末試卷
- 寶雞文理學(xué)院《油畫靜物》2021-2022學(xué)年第一學(xué)期期末試卷
- 學(xué)?!胺婪秾W(xué)生意外傷害”安全應(yīng)急演練方案及總結(jié)
- 中醫(yī)適宜技術(shù)試題(附答案)
- 新課標(biāo)2023版高考地理一輪檢測(cè)三十五從區(qū)域認(rèn)知的視角聚焦自然災(zāi)害
- 期中鞏固練習(xí)(試題)-2024-2025學(xué)年統(tǒng)編版(2024)語文一年級(jí)上冊(cè)
- 防風(fēng)應(yīng)急預(yù)案
- 平均數(shù)(教案)-2024-2025學(xué)年蘇教版四年級(jí)上冊(cè)數(shù)學(xué)
- 人教版(2024)第三單元-漢語拼音《zcs》教學(xué)課件
- 2023-2024學(xué)年河南省鄭州實(shí)驗(yàn)外國語中學(xué)八年級(jí)(上)月考數(shù)學(xué)試卷(10月份)含答案
- 4《平平安安回家來》第二課時(shí)(教學(xué)設(shè)計(jì))-一年級(jí)道德與法治上冊(cè)統(tǒng)編版·2024
- 羊肚菌采購協(xié)議書模板
- GB/T 4706.27-2024家用和類似用途電器的安全第27部分:風(fēng)扇的特殊要求
- 部編版初中語文教材目錄
- 2024精麻藥品培訓(xùn)知識(shí)試題庫及答案(完整版)
- 人教版道德與法治六年級(jí)上冊(cè)全冊(cè)單元測(cè)試卷課件
評(píng)論
0/150
提交評(píng)論