iOS Quartz 2D 使用詳解

前言：

? ? ? 雖然UIKit框架給我們提供了很多好用的UI控件，如：UIButton，UIImage，UILabel壮啊，這些基本能滿足我們大部分開(kāi)發(fā)需求，但是對(duì)于一些比較復(fù)雜的蹋半，比較個(gè)性化的UI他巨，如需要顯示：餅圖充坑，柱狀圖等减江，這個(gè)時(shí)候就需要我們自定義View了，這時(shí)可以利用Quartz2D技術(shù)將控件內(nèi)部的結(jié)構(gòu)畫(huà)出來(lái)捻爷，自定義控件的樣子辈灼。然后顯示在我們的界面上。

? ? ? ? 這部分內(nèi)容在開(kāi)發(fā)中使用的也是挺普遍的也榄，由于時(shí)常會(huì)忘記一些內(nèi)容巡莹，特寫(xiě)一篇文章記錄一下司志，方便日后使用的時(shí)候查看，同時(shí)再加深一下自己的印象降宅，也希望能幫助到一些朋友骂远，謝謝。

一：Quartz 2D介紹

? ? ? ? ? Quart2D是CoreGraphic的一部分腰根，基于C的API激才，一個(gè)二維繪圖引擎，同時(shí)支持iOS和Mac系統(tǒng)额嘿。這個(gè)繪圖引擎是設(shè)備無(wú)關(guān)的瘸恼，也就是說(shuō)，不用關(guān)心設(shè)備的大小册养，設(shè)備的分辨率东帅，只要利用Quartz 2D，這些設(shè)備相關(guān)的會(huì)自動(dòng)處理球拦。在使用的時(shí)候需要導(dǎo)入CoreGraphics.framework

? ? ? ? ?功能：

繪制圖形 : 線條\三角形\矩形\圓\弧等 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

繪制文字 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

繪制\生成圖片(圖像) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

讀取\生成PDF ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

截圖\裁剪圖片 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

自定義UI控件

二：圖形上下文

? ? ? ? 在ios中繪制圖形靠闭，離不開(kāi)圖形上下文，它用來(lái)包含繪制的結(jié)果坎炼，然后把這個(gè)結(jié)果渲染到屏幕上去阎毅，而Quartz 2D的容器就是CGContextRef數(shù)據(jù)模型。這種數(shù)據(jù)模型是C的結(jié)構(gòu)體点弯，存儲(chǔ)了渲染到屏幕上需要的一切信息扇调。圖形上下文就相當(dāng)于畫(huà)布，不同類(lèi)型的畫(huà)布就是決定著畫(huà)得內(nèi)容將展示在哪里抢肛。


? ? ? 類(lèi)型：

Bitmap Graphics Context ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

PDF Graphics Context ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

Window Graphics Context ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

Layer Graphics Context ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

Printer Graphics Context

? ? ? 作用：

1：保存繪圖信息狼钮、繪圖狀態(tài)

2：決定繪制的輸出目標(biāo)（繪制到什么地方去？）（輸出目標(biāo)可以是PDF文件捡絮、Bitmap或者顯示器的窗口上）

三：利用Quartz 2D自定義view

? ? ?drawRect：方法介紹

? ? ? 自定義View需要新建一個(gè)View繼承自UIView熬芜，默認(rèn)的就會(huì)有一個(gè)drawRect方法，調(diào)用自定義的View中的drawRect:方法之前福稳，視圖對(duì)象會(huì)自動(dòng)配置其繪制環(huán)境涎拉，使代碼可以立即進(jìn)行繪制。作為這些配置的一部分的圆，UIView對(duì)象會(huì)為當(dāng)前繪制環(huán)境創(chuàng)建一個(gè)圖形上下文（對(duì)應(yīng)于CGContextRef封裝類(lèi)型）鼓拧。在其他地方拿不到view相關(guān)的上下文，所以不能實(shí)現(xiàn)繪制越妈。

? ? ? 想要把繪制的圖像顯示到view上季俩，圖形上下文必須跟view相關(guān)聯(lián)，才能將內(nèi)容繪制到view上面梅掠，只有在drawRect:方法中才能取得跟view相關(guān)聯(lián)的圖形上下文酌住，View內(nèi)部有個(gè)layer（圖層）屬性店归，drawRect:方法中取得的是一個(gè)Layer Graphics Context，因此酪我，繪制的東西其實(shí)是繪制到view的layer上去了消痛，View之所以能顯示東西，完全是因?yàn)樗鼉?nèi)部的layer都哭。所以這個(gè)方法是自定義view必須要實(shí)現(xiàn)的方法肄满。

? ? drawRect：方法的調(diào)用

*當(dāng)視圖第一次加載的時(shí)候就會(huì)調(diào)用 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

*當(dāng)視圖重新繪制的時(shí)候會(huì)調(diào)用

注意： ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

drawRect方法不能直接手動(dòng)調(diào)用,手動(dòng)調(diào)用獲取不到正確的上下文,只能系統(tǒng)自動(dòng)調(diào)用

通過(guò)調(diào)用視圖的setNeedsDisplay來(lái)進(jìn)行重繪，setNeedsDisplay:這個(gè)方法中內(nèi)部會(huì)自動(dòng)調(diào)用drawRect方法.

? ?自定義view的步驟：

新建一個(gè)類(lèi)质涛，繼承自UIView ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

實(shí)現(xiàn)- (void)drawRect:(CGRect)rect方法稠歉，然后在這個(gè)方法中 ? ? ? ? ? ? ? ? ?

取得跟當(dāng)前view相關(guān)聯(lián)的圖形上下文 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

繪制相應(yīng)的圖形內(nèi)容 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

利用圖形上下文將繪制的所有內(nèi)容渲染顯示到view上面

四：利用Quartz 2D自定義view的實(shí)例

此實(shí)例都是通過(guò)c語(yǔ)言實(shí)現(xiàn)，也可以通過(guò)oc語(yǔ)言路徑實(shí)現(xiàn)

1>:繪制一條線段

獲取圖形上下文? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextRef ref=UIGraphicsGetCurrentContext();? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

新建一個(gè)圖形的起點(diǎn)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextMoveToPoint(ref, 20, 20);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

添加一個(gè)線段到某個(gè)點(diǎn)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextAddLineToPoint(ref, 100, 100);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

渲染? ? ? 如果只是繪制一條線段,需要用stroke來(lái)渲染 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextStrokePath(ref);

2>:繪制三角形 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

獲取圖型上下文 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?CGContextRef ref=UIGraphicsGetCurrentContext(); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

// 繪制圖形如果設(shè)置線段的時(shí)候,沒(méi)有移動(dòng)到新的線段的起點(diǎn),會(huì)默認(rèn)以上一個(gè)線段的結(jié)束點(diǎn)作為起點(diǎn) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

移動(dòng)到某一點(diǎn)新建一個(gè)圖形的起點(diǎn) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextMoveToPoint(ref, 50, 20); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

添加一個(gè)線段到某個(gè)點(diǎn) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?CGContextAddLineToPoint(ref, 100, 100); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

繪制第二條線段 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?CGContextAddLineToPoint(ref, 20, 40); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

繪制第三條線段 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?CGContextAddLineToPoint(ref, 50, 20); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

渲染 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextStrokePath(ref);

3>:繪制矩形

獲取上下文 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?CGContextRefref=UIGraphicsGetCurrentContext(); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

繪制圖形 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?CGContextAddRect(ref,CGRectMake(30, 20, 100, 50)); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

渲染 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??CGContextFillPath(ref);

4>:繪制橢圓

獲取上下文 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?CGContextRefref=UIGraphicsGetCurrentContext(); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

繪制圖形 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextAddEllipseInRect(ref,CGRectMake(30, 20, 100, 50)); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

渲染 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??CGContextFillPath(ref);

5>:繪制圓

獲取上下文? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextRefref=UIGraphicsGetCurrentContext();? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

繪制圖形 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextAddArc(ref, 100, 100, 50, 0,M_PI*2, 0); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

渲染? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextFillPath(ref);

注：CGContextAddArc參數(shù)含義 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <#CGFloat x#>, <#CGFloat y#>,用來(lái)表示圓心汇陆，<#CGFloat radius#>:表示圓的半徑怒炸，<#CGFloat startAngle#>:表示開(kāi)始角度，<#CGFloat endAngle#>:結(jié)束角度毡代，<#int clockwise#>:用來(lái)表示順時(shí)針還是逆時(shí)針阅羹，0.表示順時(shí)針，1.表示逆時(shí)針教寂。oc相反捏鱼。

6>:繪制實(shí)心的圓弧

獲取上下文? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextRefref=UIGraphicsGetCurrentContext();? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

繪制圓弧? ? ? 繪制線段先? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

CGContextMoveToPoint(ref, 100, 100);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

CGContextAddLineToPoint(ref, 150, 100);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

繪制弧線? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextAddArc(ref, 100, 100, 50, 0, M_PI_2, 0);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

閉合路徑 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextClosePath(ref); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

渲染? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextFillPath(ref);

設(shè)置圖形或線段樣式的方法：通用

// 設(shè)置線條顏色 紅色? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextSetRGBStrokeColor(ref, 1.0, 0, 0, 1.0);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

// 設(shè)置線條寬度? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextSetLineWidth(ref, 10);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

// 設(shè)置線條的起點(diǎn)和終點(diǎn)的樣式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? kCGLineCapButt,? 默認(rèn) kCGLineCapRound,? 圓角? kCGLineCapSquare? 沒(méi)什么效果? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

CGContextSetLineCap(ref, kCGLineCapRound);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

// 設(shè)置線條的連接點(diǎn)的樣式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? kCGLineJoinMiter,默認(rèn)樣式 kCGLineJoinRound,圓角樣式? kCGLineJoinBevel:切角樣式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

CGContextSetLineJoin(ref, kCGLineJoinRound);

圖形上下文棧的兩種方法：圖形顯示的原理

//先把當(dāng)前的圖形上下文狀態(tài)保存到棧 在設(shè)置屬性之前保存 保存的是系統(tǒng)默認(rèn)狀態(tài)，如果在設(shè)置之后保存酪耕，保存的是設(shè)置之后的? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextSaveGState(ref);

//設(shè)置繪圖狀態(tài)? 如果想恢復(fù)原始的設(shè)置用此方法导梆，還原繪圖狀態(tài),最原始的狀態(tài)，會(huì)從圖形上下文狀態(tài)棧當(dāng)中把當(dāng)前的覆蓋掉? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextRestoreGState(ref);

圖形上下文的矩陣變化

利用矩陣操作迂烁，能讓繪制到上下文中的所有路徑一起發(fā)生變化, ? ? ?給上下文做矩陣變化,一定要在添加路徑之前

平移 ? ? ? ?CGContextTranslateCTM(CGContextRef c, CGFloat tx, CGFloat ty)

縮放? ? ? ? CGContextScaleCTM(CGContextRef c, CGFloat sx, CGFloat sy)

旋轉(zhuǎn)? ? ? ? CGContextRotateCTM(CGContextRef c, CGFloat angle)

渲染的方式

渲染的方式Stroke空心 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextStrokePath(ref);

渲染的方式Fill實(shí)心 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextFillPath(ref);

通過(guò)mode? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? kCGPathFill,? ? kCGPathEOFill,? ? kCGPathStroke,kCGPathFillStroke,? kCGPathEOFillStroke 看尼。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextDrawPath(ref, kCGPathEOFillStroke);

用來(lái)渲染指定范圍內(nèi)的視圖 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CGContextStrokeRect(ref, CGRectMake(0, 0, 200, 200));

實(shí)際應(yīng)用：餅圖

積偶填充規(guī)則

結(jié)論：被覆蓋過(guò)奇數(shù)次的點(diǎn)填充,被覆蓋過(guò)偶數(shù)次的點(diǎn)不填充

非零環(huán)繞數(shù)規(guī)則：

結(jié)論： ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

默認(rèn)填充模式：kCGPathFill，從左到右跨過(guò), +1盟步。從右到左跨過(guò), -1藏斩。最后如果為0,那么不填充,否則填充。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

也就是說(shuō)： ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

觀察最里面的圓依次與外面的圓相比較却盘，看旋轉(zhuǎn)方向狰域，如果順時(shí)針和逆時(shí)針畫(huà)出來(lái)的圓個(gè)數(shù)相等（算最里面的圓）則最里面的圓等于0，不填充黄橘，反之不等于0兆览，填充。依次類(lèi)推旬陡，再拿第二個(gè)圓與外面的圓比較拓颓，同理语婴。

五：利用UIKit進(jìn)行繪圖

1>:繪制文字

NSString*text =@"sdafsafg";? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

//創(chuàng)建一個(gè)可變字典描孟，來(lái)儲(chǔ)存文字的狀態(tài)? ? ? ? ? ? ? ? ? ? ? ? ? ? NSMutableDictionary*attributesDict = [NSMutableDictionarydictionary];? ? ? ? ?

attributesDict[NSFontAttributeName] = [UIFontsystemFontOfSize:20];//大小

attributesDict[NSForegroundColorAttributeName] = [UIColorredColor];//顏色

drawAtPoint這個(gè)方法文字不可以自動(dòng)換行表示繪制的位置[textdrawAtPoint:CGPointMake(0, 0)withAttributes:attributesDict];? ? ? ? ? ? ? ? ? ? ?

drawInRect這個(gè)方法文字可以自動(dòng)換行 表示繪制的范圍 只能在某一個(gè)范圍

[text drawInRect:rect withAttributes:attributesDict];

2>:繪制圖片

UIImage *image = [UIImage imageNamed:@"圖片.png"]; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

// 設(shè)置矩形剪裁區(qū)域,一定要在渲染之前? 把超出剪裁區(qū)域的部分全部剪裁掉UIRectClip(CGRectMake(0, 0, 50, 50)); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

// 平鋪 會(huì)把給定的范圍填充滿圖片 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [image drawAsPatternInRect:rect]; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

// 默認(rèn)顯示的尺寸就是圖片的尺寸 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [image drawAtPoint:CGPointZero]; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

//顯示的圖片尺寸就是設(shè)置的范圍 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //[image drawInRect:CGRectMake(0, 0, 100, 100)];

六：圖片裁剪

七：截取屏幕獲取圖片：


最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末驶睦，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子匿醒，更是在濱河造成了極大的恐慌场航，老刑警劉巖，帶你破解...
    沈念sama閱讀 218,682評(píng)論 6贊 507
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件廉羔，死亡現(xiàn)場(chǎng)離奇詭異溉痢，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)憋他，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門(mén)孩饼，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人竹挡，你說(shuō)我怎么就攤上這事镀娶。” “怎么了揪罕？”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,083評(píng)論 0贊 355
  • 道士緝兇錄：失蹤的賣(mài)姜人
    文/不壞的土叔 我叫張陵梯码，是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我好啰，道長(zhǎng)轩娶，這世上最難降的妖魔是什么？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,763評(píng)論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任框往，我火速辦了婚禮鳄抒，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘椰弊。我一直安慰自己嘁酿，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,785評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布男应。 她就那樣靜靜地躺著闹司，像睡著了一般。 火紅的嫁衣襯著肌膚如雪沐飘。 梳的紋絲不亂的頭發(fā)上游桩，一...
    開(kāi)封第一講書(shū)人閱讀 51,624評(píng)論 1贊 305
  • 城市分裂傳說(shuō)
    那天，我揣著相機(jī)與錄音耐朴，去河邊找鬼借卧。 笑死，一個(gè)胖子當(dāng)著我的面吹牛筛峭，可吹牛的內(nèi)容都是我干的铐刘。 我是一名探鬼主播，決...
    沈念sama閱讀 40,358評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼影晓，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼镰吵！你這毒婦竟也來(lái)了檩禾？” 一聲冷哼從身側(cè)響起，我...
    開(kāi)封第一講書(shū)人閱讀 39,261評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤疤祭，失蹤者是張志新（化名）和其女友劉穎盼产，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體勺馆，經(jīng)...
    沈念sama閱讀 45,722評(píng)論 1贊 315
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡戏售，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了草穆。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片灌灾。...
    茶點(diǎn)故事閱讀 40,030評(píng)論 1贊 350
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖悲柱，靈堂內(nèi)的尸體忽然破棺而出紧卒，到底是詐尸還是另有隱情，我是刑警寧澤诗祸，帶...
    沈念sama閱讀 35,737評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布跑芳，位于F島的核電站，受9級(jí)特大地震影響直颅，放射性物質(zhì)發(fā)生泄漏博个。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,360評(píng)論 3贊 330
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一功偿、第九天 我趴在偏房一處隱蔽的房頂上張望牧挣。 院中可真熱鬧念搬，春花似錦乙埃、人聲如沸版仔。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,941評(píng)論 0贊 22
  • 一樁弒父案吨瞎，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)痹兜。三九已至，卻和暖如春颤诀，著一層夾襖步出監(jiān)牢的瞬間字旭，已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,057評(píng)論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工崖叫， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留遗淳，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,237評(píng)論 3贊 371
  • 代替公主和親
    正文 我出身青樓心傀，卻偏偏與公主長(zhǎng)得像屈暗，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,976評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容

  • --繪圖與濾鏡全面解析 概述 在iOS中可以很容易的開(kāi)發(fā)出絢麗的界面效果养叛，一方面得益于成功系統(tǒng)的設(shè)計(jì)种呐，另一方面得益...
    韓七夏閱讀 2,727評(píng)論 2贊 10
  • 本章中迄今為止的繪制實(shí)施例中大多會(huì)產(chǎn)生一個(gè)UIImage對(duì)象，主要是通過(guò)調(diào)用UIGraphicsBeginImag...
    shenzhenboy閱讀 1,370評(píng)論 0贊 4
  • 我最親愛(ài)的寶貝 你生來(lái)圓滿俱足 你是那么淳樸一铅、善良陕贮、富有朝氣 你有無(wú)窮的智慧堕油，無(wú)窮的力量 遇到任何困難不低頭 遇到...
    冰清玉潔2017閱讀 204評(píng)論 0贊 0
  • 大清早起床,又是美好的一天開(kāi)始了,今天好像是周末,別的小朋友好像都放假了,而我只能待在家里不能出去. 于是大清早起...
    是代打還閱讀 123評(píng)論 0贊 0
  • 九月九日憶重陽(yáng) 登高遙望爹和娘 銘感此生養(yǎng)育恩 無(wú)言寄思兩高堂
    南郭校尉閱讀 215評(píng)論 0贊 0