iOS 中各種圖形的繪制

繪圖我們要用到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);


效果如圖所示:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,333評(píng)論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,491評(píng)論 3 416
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,263評(píng)論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,946評(píng)論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,708評(píng)論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,186評(píng)論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,255評(píng)論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,409評(píng)論 0 288
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,939評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,774評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,976評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,518評(píng)論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,209評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,641評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,872評(píng)論 1 286
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,650評(píng)論 3 391
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,958評(píng)論 2 373

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