繪圖我們要用到Core Graphics框架,那么什么是Core Graphics框架?首先我們來介紹一下。
一、 Core Graphics是什么??
Core Graphics Framework是一套基于C的API框架,使用了Quartz作為繪圖引擎。它提供了低級(jí)別、輕量級(jí)、高保真度的2D渲染。該框架可以用于基于路徑的繪圖、變換、顏色管理、脫屏渲染,模板、漸變、遮蔽、圖像數(shù)據(jù)管理、圖像的創(chuàng)建、遮罩以及PDF文檔的創(chuàng)建、顯示和分析。
二、Core Graphics如何去繪制圖呢?
Core Graphics API所有的操作都在一個(gè)上下文中進(jìn)行。所以在繪圖之前需要獲取該上下文并傳入執(zhí)行渲染的函數(shù)中。如果你正在渲染一副在內(nèi)存中的圖片,此時(shí)就需要傳入圖片所屬的上下文。獲得一個(gè)圖形上下文是我們完成繪圖任務(wù)的第一步,你可以將圖形上下文理解為一塊畫布。如果你沒有得到這塊畫布,那么你就無法完成任何繪圖操作。當(dāng)然,有許多方式獲得一個(gè)圖形上下文,這里我介紹兩種最為常用的獲取方法。
第一種方法就是創(chuàng)建一個(gè)圖片類型的上下文。調(diào)用UIGraphicsBeginImageContextWithOptions函數(shù)就可獲得用來處理圖片的圖形上下文。利用該上下文,你就可以在其上進(jìn)行繪圖,并生成圖片。調(diào)用UIGraphicsGetImageFromCurrentImageContext函數(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上。
三、Core Graphics繪圖時(shí)在判斷上下問時(shí)應(yīng)該注意什么?
判斷一個(gè)上下文是否為當(dāng)前圖形上下文需要注意的幾點(diǎn):
1.UIGraphicsBeginImageContextWithOptions函數(shù)不僅僅是創(chuàng)建了一個(gè)適用于圖形操作的上下文,并且該上下文也屬于當(dāng)前上下文。
2.當(dāng)drawRect方法被調(diào)用時(shí),UIView的繪圖上下文屬于當(dāng)前圖形上下文。
3.回調(diào)方法所持有的context:參數(shù)并不會(huì)讓任何上下文成為當(dāng)前圖形上下文。此參數(shù)僅僅是對(duì)一個(gè)圖形上下文的引用罷了。
四、具體實(shí)現(xiàn)如下
所有畫圓、矩形、曲線等圖形我們都需要重寫-(void)drawRect:(CGRect)rect這個(gè)方法。下面來看一下具體每一種圖形我們是如何實(shí)現(xiàn)的。
1)重寫-(void)drawRect:(CGRect)rect方法。
2)在重寫方法里面創(chuàng)建一塊畫布。
//一個(gè)不透明類型的Quartz 2D繪畫環(huán)境,相當(dāng)于一個(gè)畫布,你可以在上面任意繪畫
CGContextRefcontext =UIGraphicsGetCurrentContext();
1、畫圓
//邊框圓
CGContextSetRGBStrokeColor(context,1,1,1,1.0);//畫筆線的顏色
CGContextSetLineWidth(context,1.0);//線的寬度
//void CGContextAddArc(CGContextRef c,CGFloat x, CGFloat y,CGFloat radius,CGFloat startAngle,CGFloat endAngle, int clockwise)1弧度=180°/π(≈57.3°)度=弧度×180°/π 360°=360×π/180=2π弧度
// x,y為圓點(diǎn)坐標(biāo),radius半徑,startAngle為開始的弧度,endAngle為結(jié)束的弧度,clockwise 0為順時(shí)針,1為逆時(shí)針。
CGContextAddArc(context,100,20,15,0,2*PI,0);//添加一個(gè)圓
CGContextDrawPath(context,kCGPathStroke);//繪制路徑
//填充圓,無邊框
CGContextAddArc(context,150,30,30,0,2*PI,0);//添加一個(gè)圓
CGContextDrawPath(context,kCGPathFill);//繪制填充
//畫大圓并填充顏
UIColor*aColor = [UIColorcolorWithRed:1green:0.0blue:0alpha:1];
CGContextSetFillColorWithColor(context, aColor.CGColor);//填充顏色
CGContextSetLineWidth(context,3.0);//線的寬度
CGContextAddArc(context,250,40,40,0,2*PI,0);//添加一個(gè)圓
//kCGPathFill填充非零繞數(shù)規(guī)則,kCGPathEOFill表示用奇偶規(guī)則,kCGPathStroke路徑,kCGPathFillStroke路徑填充,kCGPathEOFillStroke表示描線,不是填充
CGContextDrawPath(context,kCGPathFillStroke);//繪制路徑加填充
效果圖:
2)畫線或弧線
///*畫線及孤線*
////畫線
CGPointaPoints[2];//坐標(biāo)點(diǎn)
aPoints[0] =CGPointMake(100,80);//坐標(biāo)1
aPoints[1] =CGPointMake(130,80);//坐標(biāo)2
//CGContextAddLines(CGContextRef c, const CGPoint points[],size_t count)
//points[]坐標(biāo)數(shù)組,和count大小
CGContextAddLines(context, aPoints,2);//添加線
CGContextDrawPath(context,kCGPathStroke);//根據(jù)坐標(biāo)繪制路徑
//
////畫笑臉弧線
////左
//self.backgroundColor = [UIColor colorWithRed:0.9694 green:1.0 blue:0.9556 alpha:1.0]
CGContextSetRGBStrokeColor(context,0.9694,1.0,0.9556,1.0);//改變畫筆顏色
CGContextMoveToPoint(context,140,80);//開始坐標(biāo)p1
//CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1,CGFloat x2, CGFloat y2, CGFloat radius)
//x1,y1跟p1形成一條線的坐標(biāo)p2,x2,y2結(jié)束坐標(biāo)跟p3形成一條線的p3,radius半徑,注意,需要算好半徑的長(zhǎng)度,
CGContextAddArcToPoint(context,148,68,156,80,10);
CGContextStrokePath(context);//繪畫路徑
//右
CGContextMoveToPoint(context,160,80);//開始坐標(biāo)p1
//CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1,CGFloat x2, CGFloat y2, CGFloat radius)
//x1,y1跟p1形成一條線的坐標(biāo)p2,x2,y2結(jié)束坐標(biāo)跟p3形成一條線的p3,radius半徑,注意,需要算好半徑的長(zhǎng)度,
CGContextAddArcToPoint(context,168,68,176,80,10);
CGContextStrokePath(context);//繪畫路徑
//右
CGContextMoveToPoint(context,150,90);//開始坐標(biāo)p1
//CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1,CGFloat x2, CGFloat y2, CGFloat radius)
//x1,y1跟p1形成一條線的坐標(biāo)p2,x2,y2結(jié)束坐標(biāo)跟p3形成一條線的p3,radius半徑,注意,需要算好半徑的長(zhǎng)度,
CGContextAddArcToPoint(context,158,102,166,90,10);
CGContextStrokePath(context);//繪畫路徑
效果圖如下:
3、畫橢圓
//畫橢圓
CGContextAddEllipseInRect(context,CGRectMake(160,180,200,100));//橢圓
CGContextDrawPath(context,kCGPathFillStroke);
效果如圖:
4、畫三角形
///*畫三角形*/
////只要三個(gè)點(diǎn)就行跟畫一條線方式一樣,把三點(diǎn)連接起來
CGPointsPoints[3];//坐標(biāo)點(diǎn)
sPoints[0] =CGPointMake(100,220);//坐標(biāo)1
sPoints[1] =CGPointMake(130,220);//坐標(biāo)2
sPoints[2] =CGPointMake(130,160);//坐標(biāo)3
CGContextAddLines(context, sPoints,3);//添加線
CGContextClosePath(context);//封起來
CGContextDrawPath(context,kCGPathFillStroke);//根據(jù)坐標(biāo)繪制路徑
效果如圖:
5、畫矩形
///*畫圓角矩形*/
floatfw =180;
floatfh =280;
CGContextMoveToPoint(context, fw, fh-20);//開始坐標(biāo)右邊開始
CGContextAddArcToPoint(context, fw, fh, fw-20, fh,10);//右下角角度
CGContextAddArcToPoint(context,120, fh,120, fh-20,10);//左下角角度
CGContextAddArcToPoint(context,120,250, fw-20,250,10);//左上角
CGContextAddArcToPoint(context, fw,250, fw, fh-20,10);//右上角
CGContextClosePath(context);
CGContextDrawPath(context,kCGPathFillStroke);//根據(jù)坐標(biāo)繪制路徑
效果如圖:
6、畫貝塞爾曲線
//二次曲線函數(shù)
CGContextMoveToPoint(context,120,300);//設(shè)置Path的起點(diǎn)
CGContextAddQuadCurveToPoint(context,190,310,120,390);//設(shè)置貝塞爾曲線的控制點(diǎn)坐標(biāo)和終點(diǎn)坐標(biāo)
CGContextStrokePath(context);
//三次曲線函數(shù)
CGContextMoveToPoint(context,200,300);//設(shè)置Path的起點(diǎn)
CGContextAddCurveToPoint(context,250,280,250,400,280,300);//設(shè)置貝塞爾曲線的控制點(diǎn)坐標(biāo)和控制點(diǎn)坐標(biāo)終點(diǎn)坐標(biāo)
CGContextStrokePath(context);
效果如圖所示: