iOS 開發(fā) Quartz 2D+ UIBezierPath繪圖大全詳解

1、iOS 開發(fā) Quartz 2D+ UIBezierPath繪圖大全詳解Quartz 2D 使用大全結(jié)構(gòu)圖UIKIt UIBezierPath Core Graphics OpenGL ES Quartz2D的區(qū)別和聯(lián)系UIKIt：UIKit中的控件都是基于Core Graphics實(shí)現(xiàn)的UIBezierPath：UIBezierPath屬于UIKit，它是蘋果對(duì)復(fù)雜的Core Graphics進(jìn)行的封裝，方便我們用OC語言進(jìn)行簡單的繪圖Core Graphics：是一套基于C語言的API,支持向量圖形，線、形狀、圖案、路徑、剃度、位圖圖像和pdf 內(nèi)容的繪制。OpenGL ES：OpenGL

2、是由SGI公司開發(fā)的一套3D圖形軟件接口標(biāo)準(zhǔn)，它只是一個(gè)標(biāo)準(zhǔn)，具體實(shí)現(xiàn)由機(jī)械制造商來完成，所以不同的機(jī)器他的效果可能是完全不一樣的。OpenGL-ES版本，主要是應(yīng)對(duì)嵌入式環(huán)境和應(yīng)用的要求，應(yīng)該說在高效完成2D/3D界面的同時(shí)，達(dá)到了降低功耗的效果。Quartz2D：quartz是一個(gè)通用的術(shù)語，用于描述在IOS整個(gè)媒體層用到的多種技術(shù) 包括圖形、動(dòng)畫、音頻、適配。Quart 2D 是一組二位繪圖和渲染API，Core Graphic會(huì)使用到這組APICore Graphics框架繪圖我們要用到Core Graphics框架,Core Graphics Framework是一套基于C的API框

3、架，使用了Quartz作為繪圖引擎。該框架可以用于基于路徑的繪圖、變換、顏色管理、脫屏渲染，模板、漸變、遮蔽、圖像數(shù)據(jù)管理、圖像的創(chuàng)建、遮罩以及PDF文檔的創(chuàng)建、顯示和分析。Core Graphics API所有的操作都在一個(gè)上下文中進(jìn)行。所以在繪圖之前需要獲取該上下文并傳入執(zhí)行渲染的函數(shù)中。介紹兩種最為常用的獲取方法。第一種方法就是創(chuàng)建一個(gè)圖片類型的上下文。調(diào)用UIGraphicsBeginImageContextWithOptions函數(shù)就可獲得用來處理圖片的圖形上下文。利用該上下文，你就可以在其上進(jìn)行繪圖，并生成圖片。調(diào)用UIGraphicsGetImageFromCurrentImag

4、eContext函數(shù)可從當(dāng)前上下文中獲取一個(gè)UIImage對(duì)象。記住在你所有的繪圖操作后別忘了調(diào)用UIGraphicsEndImageContext函數(shù)關(guān)閉圖形上下文。第二種方法是利用cocoa為你生成的圖形上下文。當(dāng)你子類化了一個(gè)UIView并實(shí)現(xiàn)了自己的drawRect：方法后，一旦drawRect：方法被調(diào)用，Cocoa就會(huì)為你創(chuàng)建一個(gè)圖形上下文，此時(shí)你對(duì)圖形上下文的所有繪圖操作都會(huì)顯示在UIView上。什么是Quartz2D繪圖引擎 Quartz 2D是個(gè)二維繪圖引擎,iOS中部分控件的內(nèi)容都是通過Quartz 2D畫出來的。 Quartz 2D是純C語言的 Quartz 2D的API

5、來自于CoreGraphics框架 數(shù)據(jù)類型和函數(shù)基本都是CG作為前綴o CGContextRefo CGPathRefo CGContextStrokePath（ctx）Quartz 2D能完成的工作 繪制圖形 : 線條三角形矩形圓弧形 繪制文字 繪制生成圖片(圖像) 讀取生成PDF 截圖裁剪圖片 自定義UI控件Quartz2D繪圖有以下兩種方式注意: UIBezierPath 對(duì)象可以獨(dú)立使用, 無需手動(dòng)獲取“圖形上下文”對(duì)象，此處為了更好的理解“圖形上下文對(duì)象”所以暫時(shí)還是采用手動(dòng)獲取“圖形上下文”對(duì)象的方式來繪圖。drawRect:方法的使用 View內(nèi)部有個(gè)layer（圖層）屬性，d

6、rawRect:方法中取得的是一個(gè)Layer Graphics Context，因此，繪制的東西其實(shí)是繪制到view的layer上去了 iOS的繪圖操作是在UIView類的drawRect方法中完成的，重寫drawRect方法，在這里進(jìn)行繪圖操作，程序會(huì)自動(dòng)調(diào)用此方法進(jìn)行繪圖。 重繪操作仍然在drawRect方法中完成，蘋果要求我們調(diào)用UIView類中的setNeedsDisplay方法，則程序會(huì)自動(dòng)調(diào)用drawRect方法進(jìn)行重繪。（調(diào)用setNeedsDisplay會(huì)自動(dòng)調(diào)用drawRect）。 在UIView中,重寫drawRect: (CGRect) aRect方法,可以自己定義想要畫

7、的圖案.且此方法一般情況下只會(huì)畫一次.也就是說這個(gè)drawRect方法一般情況下只會(huì)被掉用一次. 當(dāng)某些情況下想要手動(dòng)重畫這個(gè)View,只需要掉用self setNeedsDisplay方法即可. rect指的就是當(dāng)前view的bounds，即當(dāng)前視圖的所有范圍。 drawRect:方法是系統(tǒng)幫我們調(diào)用的，不能手動(dòng)去調(diào)用這個(gè)方法。原因是手動(dòng)去調(diào)用drawRect方法的時(shí)候無法保證系統(tǒng)已經(jīng)幫我們創(chuàng)建好了”圖形上下文”，所以這樣就無法保證在drawRect：方法中獲取”圖形上下文”對(duì)象，也就無法進(jìn)行繪圖了。 當(dāng)這個(gè)view第一次顯示的時(shí)候會(huì)調(diào)用一次drawRect方法；當(dāng)這個(gè)view執(zhí)行重繪操作的

8、時(shí)候會(huì)重新調(diào)用drawRect方法；通過調(diào)用self setNeedsDisplay 【重繪整個(gè)view】或self setNeedsDisplayInRect:【重繪指定區(qū)域】的方式讓view執(zhí)行drawRect方法進(jìn)行重繪。圖形上下文CGContextRef圖形上下文的本質(zhì)：是一個(gè)Quartz2D的繪圖環(huán)境！幾種不同的渲染方式通過C語言的API繪制基本圖形#pragma mark - 通過C語言的API繪制基本圖形- (void)drawRect:(CGRect)rect / 1.獲取上下文 CGContextRef cxtRef = UIGraphicsGetCurrentContext

9、(); / 2.設(shè)置起點(diǎn) CGContextMoveToPoint(cxtRef, 50, 50); / 3.添加線 CGContextAddLineToPoint(cxtRef, 150, 150); / 3.2 繼續(xù)加線段 CGContextAddLineToPoint(cxtRef, 250, 50); / 3.3 向下的線 / 注意：如果想要新開線，需要重新設(shè)置起點(diǎn)！ CGContextMoveToPoint(cxtRef, 150, 150); CGContextAddLineToPoint(cxtRef, 150, 250); / 4.渲染/ kCGPathFill 將線段包含的部

10、分渲染成黑色！/ kCGPathStroke 只負(fù)責(zé)繪制線條！ CGContextDrawPath(cxtRef, kCGPathStroke);UIBezierPath進(jìn)行直線圖形繪制#pragma mark - 通過UIBezierPath進(jìn)行圖形繪制/ 不用寫關(guān)于圖形上下文的代碼,已經(jīng)封裝了，但是本質(zhì)，還是需要獲取到view相關(guān)的圖形上下文，進(jìn)行繪制！- (void)drawRect:(CGRect)rect / 1.獲取圖形上下文/ CGContextRef cxtRef = UIGraphicsGetCurrentContext(); / 2.創(chuàng)建路徑 UIBezierPath *p

11、ath = UIBezierPath bezierPath; / 3.1 設(shè)置起點(diǎn) path moveToPoint:CGPointMake(50, 50); / 3.2 添加線 path addLineToPoint:CGPointMake(150, 150); path addLineToPoint:CGPointMake(250, 50); / 4.渲染-不寫圖形上下文的代碼時(shí),直接使用此方法渲染繪制 path stroke; / 4.將路徑對(duì)象添加到圖形上下文/ CGContextAddPath(cxtRef, path.CGPath); / 5.渲染/ CGContextDrawPa

12、th(cxtRef, kCGPathStroke);UIBezierPath繪制矩形/ MARK: - 1.矩形- (void)drawRect:(CGRect)rect / 1.獲取圖形上下文/ CGContextRef cxtRef = UIGraphicsGetCurrentContext(); / 2.創(chuàng)建矩形的路徑 UIBezierPath *path = UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 200, 80); / 3.渲染 path stroke; / 3.添加路徑到圖形上下文/ CGContextAddPath(c

13、xtRef, path.CGPath); / 4.渲染/ CGContextDrawPath(cxtRef, kCGPathStroke);UIBezierPath繪制圓角矩形/ MARK: - 2.圓角矩形- (void)drawRect:(CGRect)rect / / 1.獲取圖形上下文/ CGContextRef cxtRef = UIGraphicsGetCurrentContext(); / 2.創(chuàng)建路徑 CGFloat radius = 20; UIBezierPath *path = UIBezierPath bezierPathWithRoundedRect:CGRectMa

14、ke(50, 50, 200, 80) cornerRadius:radius; / 3.渲染 path stroke;/ / 3.添加路徑/ CGContextAddPath(cxtRef, path.CGPath);/ / 4.渲染/ CGContextDrawPath(cxtRef, kCGPathStroke);UIBezierPath繪制橢圓/ / 1.獲取圖形上下文/ CGContextRef cxtRef = UIGraphicsGetCurrentContext(); / 2.創(chuàng)建橢圓的路徑 UIBezierPath *path = UIBezierPath bezierPat

15、hWithOvalInRect:CGRectMake(50, 50, 200, 80); / 3.渲染 path stroke;/ / 3.添加/ CGContextAddPath(cxtRef, path.CGPath);/ / 4.渲染/ CGContextDrawPath(cxtRef, kCGPathStroke);UIBezierPath繪制弧形- (void)drawRect:(CGRect)rect / MARK: - 4.弧形/ / 1.獲取上下文/ CGContextRef cxtRef = UIGraphicsGetCurrentContext(); / 2.圓弧路徑 /*

16、 center 圓心 radius 半徑 startAngle 起始角度 endAngle 結(jié)束角度 clockwise 是否為順時(shí)針！ */ / 圓心 CGPoint center = CGPointMake(150, 150); / 半徑 CGFloat radius = 100; / 起始角度 CGFloat startA = 0; / 結(jié)束角度 CGFloat endA = M_PI_2; / 是否為順時(shí)針 BOOL clockwise = NO; UIBezierPath *path = UIBezierPath bezierPathWithArcCenter:center radi

17、us:radius startAngle:startA endAngle:endA clockwise:clockwise; / 3.渲染 path stroke;/ / 3.添加路徑/ CGContextAddPath(cxtRef, path.CGPath);/ / 4.渲染/ CGContextDrawPath(cxtRef, kCGPathStroke);UIBezierPath繪制圓形 / 2.圓路徑 /* center 圓心 radius 半徑 startAngle 起始角度 endAngle 結(jié)束角度 clockwise 是否為順時(shí)針！ */ / 圓心 CGPoint cente

18、r = CGPointMake(150, 150); / 半徑 CGFloat radius = 100; / 起始角度 CGFloat startA = 0; / 結(jié)束角度 CGFloat endA = M_PI * 2; / 是否為順時(shí)針 BOOL clockwise = NO; UIBezierPath *path = UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:clockwise; / 渲染 path stroke;UIBezier

19、Path繪制扇形 / 2.圓弧路徑 /* center 圓心 radius 半徑 startAngle 起始角度 endAngle 結(jié)束角度 clockwise 是否為順時(shí)針！ */ / 圓心 CGPoint center = CGPointMake(150, 150); / 半徑 CGFloat radius = 100; / 起始角度 CGFloat startA = 0; / 結(jié)束角度 CGFloat endA = M_PI_4; / 是否為順時(shí)針 BOOL clockwise = YES; UIBezierPath *path = UIBezierPath bezierPathWith

20、ArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:clockwise; / 2.2 向圓心添加線 path addLineToPoint:center; / 渲染 path fill;繪圖狀態(tài)信息設(shè)置1 設(shè)置線寬 CGContextSetLineWidth2 設(shè)置線頭樣式 CGContextSetLineCap3 設(shè)置線段接頭樣式 CGContextSetLineJoin4 顏色的設(shè)置 UIColor redColor set- (void)drawRect:(CGRect)rect / / 1.獲

21、取圖形上下文 CGContextRef cxtRef = UIGraphicsGetCurrentContext(); / 2.創(chuàng)建矩形的路徑 UIBezierPath *path = UIBezierPath bezierPath; path moveToPoint:CGPointMake(50, 50); / 第一根線 path addLineToPoint:CGPointMake(150, 150); / 第二根線 path addLineToPoint:CGPointMake(250, 50); / 3.添加路徑到圖形上下文 CGContextAddPath(cxtRef, path.

22、CGPath); / 3.1 設(shè)置線寬！ CGContextSetLineWidth(cxtRef, 20); / 3.2 設(shè)置線頭樣式 /* kCGLineCapButt, 比較難看的！ kCGLineCapRound, 圓角 kCGLineCapSquare 平角 */ CGContextSetLineCap(cxtRef, kCGLineCapButt); / 3.3 設(shè)置接頭的樣式 /* kCGLineJoinMiter, 尖頭 kCGLineJoinRound, 圓角 kCGLineJoinBevel 多余的部分感覺被切了！ */ CGContextSetLineJoin(cxtRe

23、f, kCGLineJoinMiter); / 3.4 顏色的設(shè)置 UIColor redColor setStroke; UIColor yellowColor setFill; / 4.渲染 CGContextDrawPath(cxtRef, kCGPathFillStroke);兩種填充原則- (void)drawRect:(CGRect)rect #pragma mark - 非零繞數(shù)填充規(guī)則 self nonzeroWindingNumberRule;#pragma mark - 奇偶填充規(guī)則 self evenOddRule;#pragma mark - 非零繞數(shù)填充規(guī)則 /* *

24、 非零繞數(shù)填充規(guī)則： * 在圖形上下文中的任何一個(gè)點(diǎn) * 被順時(shí)針覆蓋標(biāo)記為 1 * 被逆時(shí)針覆蓋標(biāo)記為 -1 * 當(dāng)標(biāo)記為0的時(shí)候不填充，其他則填充 * 這個(gè)規(guī)則與方向有關(guān)，與次數(shù)無關(guān) */- (void)nonzeroWindingNumberRule / 1.獲取圖形上下文 CGContextRef cxtRef = UIGraphicsGetCurrentContext(); / 2.繪制順時(shí)針的圓形 UIBezierPath *arcY = UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 st

25、artAngle:0 endAngle:M_PI * 2 clockwise:YES; / 3.繪制逆時(shí)針的圓形 UIBezierPath *arcN = UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:75 startAngle:0 endAngle:M_PI * 2 clockwise:NO; / 驗(yàn)證與次數(shù)無關(guān) UIBezierPath *arc3 = UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 230) radius:50 startAng

26、le:0 endAngle:M_PI * 2 clockwise:NO; / 4.添加路徑對(duì)象 CGContextAddPath(cxtRef, arcY.CGPath); CGContextAddPath(cxtRef, arcN.CGPath); CGContextAddPath(cxtRef, arc3.CGPath); UIColor yellowColor setFill; / 5.渲染 CGContextDrawPath(cxtRef, kCGPathFill);#pragma mark - 奇偶填充規(guī)則/ even:偶數(shù) odd:偶數(shù)/* * 奇偶填充規(guī)則解釋： * 在圖形上下文

27、中的任何一個(gè)點(diǎn) * 如果它被路徑對(duì)象覆蓋了奇數(shù)次，在進(jìn)行渲染操作的時(shí)候這個(gè)點(diǎn)就會(huì)被渲染 * 如果它被路徑對(duì)象覆蓋了偶數(shù)次，在進(jìn)行渲染操作的時(shí)候這個(gè)點(diǎn)就不會(huì)被渲染 */- (void)evenOddRule / 獲取圖形上下文 CGContextRef cxtRef = UIGraphicsGetCurrentContext(); / 繪制水平方向矩形 UIBezierPath *rectH = UIBezierPath bezierPathWithRect:CGRectMake(50, 100, 200, 100); / 繪制圓形 UIBezierPath *arcPath = UIBezie

28、rPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:75 startAngle:0 endAngle:M_PI * 2 clockwise:YES; / 繪制豎直方向的矩形 UIBezierPath *rectV = UIBezierPath bezierPathWithRect:CGRectMake(180, 25, 50, 250); / 將路徑對(duì)象添加到圖形上下文中 CGContextAddPath(cxtRef, rectH.CGPath); CGContextAddPath(cxtRef, arcPath.CGPath

29、); CGContextAddPath(cxtRef, rectV.CGPath); UIColor orangeColor setFill; / 同時(shí)顯示stroke和fill的顏色 CGContextDrawPath(cxtRef, kCGPathEOFill);模擬下載進(jìn)度條思路：在控制器中將 slider 的值傳遞給自定義 view在自定義 View中，根據(jù)傳遞過來的值繪制弧。創(chuàng)建一個(gè)與自定義 view 一樣大小的 label 來顯示下載進(jìn)度#import interface DownloadView : UIView/* * 接收滑塊的值 */property (nonatomic,

30、 assign) float sliderValue;end#import DownloadView.hinterface DownloadView ()/ 需要先寫，再拖線！/* * 顯示百分比的label */property (nonatomic, weak) IBOutlet UILabel *valueLbl;endimplementation DownloadView#pragma mark - 重寫set方法，執(zhí)行重繪操作- (void)setSliderValue:(float)sliderValue _sliderValue = sliderValue; / 內(nèi)部執(zhí)行重繪操作

31、 self setNeedsDisplay; self.valueLbl.text = NSString stringWithFormat:%.2f%, (sliderValue * 100);#pragma mark - 繪制下載進(jìn)度條- (void)drawRect:(CGRect)rect / 1.獲取上下文 CGContextRef cxtRef = UIGraphicsGetCurrentContext(); / 2.創(chuàng)建路徑 CGFloat startA = -M_PI_2; CGFloat endA = self.sliderValue * M_PI * 2 - M_PI_2;

32、UIBezierPath *path = UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:150 startAngle:startA endAngle:endA clockwise:YES; / 保證繪制出來是扇形 path addLineToPoint:CGPointMake(150, 150); / 3.添加路徑 CGContextAddPath(cxtRef, path.CGPath); / 4.渲染 CGContextDrawPath(cxtRef, kCGPathFill);end#import Vi

33、ewController.h#import DownloadView.hinterface ViewController ()/* * 下載進(jìn)度的視圖 */property (nonatomic, weak) IBOutlet DownloadView *downloadView;endimplementation ViewController#pragma mark - 滑動(dòng)事件- (IBAction)sliderValueChanged:(UISlider *)sender NSLog(現(xiàn)在的值是 %f, sender.value); / 傳遞值給自定義view self.download

34、View.sliderValue = sender.value;end餅狀圖思路：構(gòu)建數(shù)據(jù)，NSArray *data = 30, 15, 5, 17, 3, 10, 20;。根據(jù)數(shù)據(jù)個(gè)數(shù)繪制“扇形”（?。┳⒁猓好總€(gè)弧的起始、結(jié)束弧度都是不一樣的每次繪制完畢一個(gè)弧以后都要重新設(shè)置下一次的起始弧度為當(dāng)前的結(jié)束弧度本次繪制的結(jié)束弧度，為起始弧度+本次的弧度- (void)drawRect:(CGRect)rect / 1.數(shù)據(jù) NSArray *data = 30, 15, 5, 17, 3, 10, 20; / 1.2 獲取圖形上下文 CGContextRef cxtRef = UIGraphi

35、csGetCurrentContext(); / 2.遍歷 / 2.0.1 圓心，半徑 CGPoint center = CGPointMake(150, 150); CGFloat radius = 120; BOOL clockwise = YES; / 2.0.2 定義起始角度的變量 CGFloat startA = 0; for (NSInteger i = 0; i data.count; i+) / 2.1 取出數(shù)據(jù)，并轉(zhuǎn)為int類型 float number = datai floatValue; / 2.2 計(jì)算所占用的角度 CGFloat AngleOfNum = numbe

36、r / 100 * (M_PI * 2); / 2.3 計(jì)算結(jié)束角度 CGFloat endA = startA + AngleOfNum; / 2.4 創(chuàng)建路徑對(duì)象 UIBezierPath *path = UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:clockwise; / 2.4.2 添加線 path addLineToPoint:center; / 2.5 添加路徑 CGContextAddPath(cxtRef, path.CGP

37、ath); / 隨機(jī)色 UIColor colorWithRed:(float)arc4random_uniform(256) / 255.0) green:(float)dom_uniform(256) / 255.0) blue:(float)arc4random_uniform(256) / 255.0) alpha:1.0 setFill; / 2.6 渲染 CGContextDrawPath(cxtRef, kCGPathFill); / 2.7 改變角度 startA = endA; 柱狀圖1.構(gòu)建數(shù)據(jù)， NSArray *data = 300, 150.65, 55.3, 507

38、.7, 95.8, 700, 650.65;2.根據(jù)數(shù)據(jù)的個(gè)數(shù)繪制柱狀圖。3.計(jì)算每個(gè)柱子的 x,y,w,h 即可#pragma mark - 繪制柱形圖- (void)drawRect:(CGRect)rect / 1.數(shù)據(jù) NSArray *data = 300, 150.65, 55.3, 507.7, 95.8, 700, 650.65; / 2.獲取圖形上下文 CGContextRef cxtRef = UIGraphicsGetCurrentContext(); / 計(jì)算寬度 CGFloat width = rect.size.width / (data.count * 2 - 1

39、); / 3.遍歷集合創(chuàng)建路徑對(duì)象 for (int i = 0; i 通過product-Analyze來進(jìn)行內(nèi)存分析2 使用注意：對(duì)于C語言的框架，通過使用”create” “copy” “retain”函數(shù)創(chuàng)建的對(duì)象，使用完畢后都要進(jìn)行釋放3 解決辦法CGPathRelease();/ 釋放路徑對(duì)象CFRelease(); / 可以釋放任何對(duì)象-使用Path 對(duì)象時(shí)的內(nèi)存管理問題:1 凡是遇到 retain 、 copy 、 create 出的對(duì)象, 都需要進(jìn)行 release2 但是CGPathCreateMutable()不是 OC方法, 所以不是調(diào)用 某個(gè)對(duì)象的 release方法

40、3 CGXxxxxCreate 對(duì)應(yīng)的就有 CGXxxxxRelease。4 通過 CFRelease(任何類型);可以釋放任何類型。圖片和文字繪制- (void)drawRect:(CGRect)rect self imageDemo; self strDemo;#pragma mark - 圖片的繪制- (void)imageDemo / 1.獲取圖片 UIImage *image = UIImage imageNamed:me; / 2.3種方式繪制 / - 從某個(gè)點(diǎn)開始繪制圖片 / image drawAtPoint:CGPointZero; / - 在某個(gè)區(qū)域繪制圖片 image d

41、rawInRect:CGRectMake(100, 100, 200, 300); / - 以平鋪的方式繪制圖片 / image drawAsPatternInRect:rect;#pragma mark - 繪制文字- (void)strDemo / 1.文字 NSString *str = 理想很豐滿,現(xiàn)實(shí)很滑感; / 2.繪制 NSDictionary *dict = NSFontAttributeName : UIFont systemFontOfSize:20, NSForegroundColorAttributeName : UIColor redColor ; / MARK: -

42、 1.從某個(gè)點(diǎn)繪制文字！/ str drawAtPoint:CGPointMake(50, 50) withAttributes:dict; / MARK: - 2.在某個(gè)區(qū)域繪制文字，并且會(huì)自動(dòng)換行，如果超出范圍，顯示不全！ str drawInRect:CGRectMake(100, 350, 100, 50) withAttributes:dict;自定義UIImageView剪裁原型圖片設(shè)置個(gè)人中心個(gè)性頭像- (void)drawRect:(CGRect)rect / 1.獲取圖形上下文 CGContextRef cxtRef = UIGraphicsGetCurrentContext

43、(); / MARK: - 2.在添加被裁剪路徑之前，有別的內(nèi)容被渲染了，之前渲染的內(nèi)容是否能夠顯示？ UIBezierPath *round2 = UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100); / 添加別的路徑 CGContextAddPath(cxtRef, round2.CGPath); / 設(shè)置線寬 CGContextSetLineWidth(cxtRef, 10); / 設(shè)置線條顏色 UIColor whiteColor setStroke; / 渲染 CGContextDrawPath(c

44、xtRef, kCGPathStroke); / 2.創(chuàng)建一個(gè)要裁剪的圖形的路徑【圓形】 CGPoint center = CGPointMake(150, 150); CGFloat radius = 50; CGFloat startA = 0; CGFloat endA = M_PI * 2; BOOL clockwise = YES; UIBezierPath *path = UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:clockw

45、ise; / 3.將圓形的路徑添加到圖形上下文中不能渲染 CGContextAddPath(cxtRef, path.CGPath); / MARK: - 1.路徑被渲染了，是否還能夠裁剪？ / 裁剪就達(dá)不到效果了！/ CGContextDrawPath(cxtRef, kCGPathStroke); / 4.裁剪！ CGContextClip(cxtRef); / 5.把圖片畫上去 UIImage imageNamed:me drawAtPoint:CGPointMake(100, 100);剪裁圖片賦值到imageview上,并保存到沙盒或者相冊(cè)#pragma mark - 點(diǎn)擊裁剪按鈕調(diào)

46、用的！- (IBAction)clipBtnClick:(UIButton *)sender / 0.圖片 UIImage *image = UIImage imageNamed:me; / 1.需要開啟圖片的圖形上下文 /* * size 開啟的圖形上下文的大小 * opaque 不透明！ YES不透明,四個(gè)角是黑色的！,NO透明 - NO * scale 屏幕的縮放因子！ 0.0- 直接匹配當(dāng)前設(shè)備屏幕的縮放因子！ */ UIGraphicsBeginImageContextWithOptions(image.size, NO, 0.0); / 2.獲取當(dāng)前的圖形上下文！【圖片的圖形上下文

47、】 CGContextRef cxtRef = UIGraphicsGetCurrentContext(); / 3.創(chuàng)建一個(gè)圓形的路徑 / 橢圓 - 圓形！ UIBezierPath *path = UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height); / 4.將圓形路徑添加到圖形上下文 CGContextAddPath(cxtRef, path.CGPath); / 5.裁剪 CGContextClip(cxtRef); / 6.把圖片繪制出來 image drawAtPoint:CGPointZero; / 7.從當(dāng)前的圖形上下文中獲取圖片 UIImage *clipImg = UIGraphicsGetImageFromCurrentImageContext(); / 8.把圖片的圖形上下文進(jìn)行關(guān)閉 UIGraphics