IOS開發(fā)之——繪圖(CGContext)

0 CGContextRef context = UIGraphicsGetCurrentContext(); 設(shè)置上下文


1 CGContextMoveToPoint 開始畫線

2 CGContextAddLineToPoint 畫直線



4 CGContextAddEllipseInRect 畫一橢圓

4 CGContextSetLineCap 設(shè)置線條終點(diǎn)形狀

4 CGContextSetLineDash 畫虛線

4 CGContextAddRect 畫一方框

4 CGContextStrokeRect 指定矩形

4 CGContextStrokeRectWithWidth 指定矩形線寬度

4 CGContextStrokeLineSegments 一些直線



5 CGContextAddArc 畫一曲線 前2點(diǎn)為中心 中間倆店為起始弧度 最后一數(shù)據(jù)為0則順時(shí)針畫1則逆時(shí)針

5 CGContextAddArcToPoint(context,0,0, 2, 9, 40);先畫倆條線從point 到第1點(diǎn) 從第1點(diǎn)到第2點(diǎn)的線  切割里面的圓


6 CGContextSetShadowWithColor 設(shè)置陰影
顏色
7 CGContextSetRGBFillColor 設(shè)置填充顏色

7 CGContextSetRGBStrokeColor 設(shè)置畫筆/邊框顏色


7 CGContextSetFillColorSpace 顏色空間填充

7 CGConextSetStrokeColorSpace 顏色空間畫筆設(shè)置


8 CGContextFillRect 補(bǔ)充當(dāng)前填充顏色的rect

8 CGContextSetAlaha 透明度


9 CGContextTranslateCTM 改變畫布位置

10 CGContextSetLineWidth 設(shè)置線的寬度

11 CGContextAddRects 畫多個(gè)線

12 CGContextAddQuadCurveToPoint 畫曲線


13  CGContextStrokePath 開始繪制圖片

13 CGContextDrawPath 設(shè)置繪制模式

14 CGContextClosePath 封閉當(dāng)前線路


15 CGContextTranslateCTM(context, 0, rect.size.height);    
   CGContextScaleCTM(context, 1.0, -1.0);反轉(zhuǎn)畫布


16 CGContextSetInterpolationQuality 背景內(nèi)置顏色質(zhì)量等級(jí)

16 CGImageCreateWithImageInRect 從原圖片中取小圖



17 字符串的寫入可用  NSString本身的畫圖方法 
- (CGSize)drawInRect:(CGRect)rect withFont:(UIFont *)font lineBreakMode:
(UILineBreakMode)lineBreakMode alignment:(UITextAlignment)alignment;

18對(duì)圖片放大縮小的功能就是慢了點(diǎn)
    
UIGraphicsBeginImageContext(newSize);
    
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
  
UIGraphicsEndImageContext();



19 CGColorGetComponents() 返回顏色的各個(gè)直 以及透明度 可用只讀const float 來(lái)接收  是個(gè)數(shù)組


20 畫圖片 
CGImageRef image=CGImageRetain(img.CGImage);
     
CGContextDrawImage(context, CGRectMake(10.0, height - 100.0, 90.0, 90.0), image);



21 實(shí)現(xiàn)逐變顏色填充方法 
CGContextClip(context);
    
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
    

CGFloat colors[] =
 {

204.0 / 255.0, 224.0 / 255.0, 244.0 / 255.0, 1.00,
        
29.0 / 255.0, 156.0 / 255.0, 215.0 / 255.0, 1.00,
        
0.0 / 255.0,  50.0 / 255.0, 126.0 / 255.0, 1.00,
    };
    

CGGradientRef gradient = CGGradientCreateWithColorComponents(rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));
    
CGColorSpaceRelease(rgb);    
    

CGContextDrawLinearGradient(context, gradient,CGPointMake(0.0,0.0) ,CGPointMake(0.0,self.frame.size.height),kCGGradientDrawsBeforeStartLocation);
    


22 注:  畫完圖后,必須先用CGContextStrokePath來(lái)描線,即形狀后用CGContextFillPath來(lái)填充形狀內(nèi)的顏色.

填充一個(gè)路徑的時(shí)候馍刮,路徑里面的子路徑都是獨(dú)立填充的。


假如是重疊的路徑绷落,決定一個(gè)點(diǎn)是否被填充,有兩種規(guī)則

1,nonzero winding number rule:非零繞數(shù)規(guī)則铛绰,假如一個(gè)點(diǎn)被從左到右跨過(guò)幻梯,計(jì)數(shù)器+1,從右到左跨過(guò)梧油,計(jì)數(shù)器-1,最后州邢,如果結(jié)果是0儡陨,那么不填充,如果是非零,那么填充骗村。

2,even-odd rule: 奇偶規(guī)則嫌褪,假如一個(gè)點(diǎn)被跨過(guò),那么+1胚股,最后是奇數(shù)笼痛,那么要被填充,偶數(shù)則不填充琅拌,和方向沒(méi)有關(guān)系缨伊。

 


 CGContextEOFillPath     使用奇偶規(guī)則填充當(dāng)前路徑
 CGContextFillPath   使用非零繞數(shù)規(guī)則填充當(dāng)前路徑
 CGContextFillRect   填充指定的矩形
 CGContextFillRects  填充指定的一些矩形
 CGContextFillEllipseInRect  填充指定矩形中的橢圓

 
CGContextDrawPath
 兩個(gè)參數(shù)決定填充規(guī)則,
kCGPathFill表示用非零繞數(shù)規(guī)則财忽,
kCGPathEOFill表示用奇偶規(guī)則倘核,
kCGPathFillStroke表示填充,
kCGPathEOFillStroke表示描線即彪,不是填充




當(dāng)一個(gè)顏色覆蓋上另外一個(gè)顏色,兩個(gè)顏色怎么混合
默認(rèn)方式是
result = (alpha * foreground) + (1 - alpha) * background


CGContextSetBlendMode :設(shè)置blend mode.

CGContextSaveGState :保存blend mode.

CGContextRestoreGState:在沒(méi)有保存之前活尊,用這個(gè)函數(shù)還原blend mode.

CGContextSetBlendMode 混合倆種顏色

以上引用

======================================================================


IOS直線樣式

======================================================================

虛線

畫虛線需要用到函數(shù):

CG_EXTERN void CGContextSetLineDash(CGContextRef __nullable c, CGFloat phase,
   const CGFloat * __nullable lengths, size_t count)
   CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);

此函數(shù)需要四個(gè)參數(shù):
context – 這個(gè)不用多說(shuō)
phase - 稍后再說(shuō)
lengths – 指明虛線是如何交替繪制隶校,具體看例子
count – lengths數(shù)組的長(zhǎng)度

CGContextRef context = UIGraphicsGetCurrentContext();  
CGContextBeginPath(context);  
CGContextSetLineWidth(context, 2.0);  
CGContextSetStrokeColorWithColor(context, [UIColorwhiteColor].CGColor);  
float lengths[] = {10,10};  
CGContextSetLineDash(context, 0, lengths,2);  
CGContextMoveToPoint(context, 10.0, 20.0);  
CGContextAddLineToPoint(context, 310.0,20.0);  
CGContextStrokePath(context);  
CGContextClosePath(context);  
  • lengths的值{10,10}表示先繪制10個(gè)點(diǎn),再跳過(guò)10個(gè)點(diǎn)蛹锰,如此反復(fù)深胳,如圖:


    IOS開發(fā)筆記之繪圖(CGContext小記)
  • 如果把lengths值改為{10, 20, 10},則表示先繪制10個(gè)點(diǎn)铜犬,跳過(guò)20個(gè)點(diǎn)舞终,繪制10個(gè)點(diǎn),跳過(guò)10個(gè)點(diǎn)癣猾,再繪制20個(gè)點(diǎn)敛劝,如此反復(fù),如圖:


    IOS開發(fā)筆記之繪圖(CGContext小記)
  • 注意count的值等于lengths數(shù)組的長(zhǎng)度

  • phase參數(shù)表示在第一個(gè)虛線繪制的時(shí)候跳過(guò)多少個(gè)點(diǎn)纷宇,舉例說(shuō)明:

float lengths[] = {10,5};  
CGContextSetLineDash(context, 0, lengths, 2);    
CGContextMoveToPoint(context, 0.0, 20.0);    
CGContextAddLineToPoint(context, 310.0, 20.0);     
CGContextStrokePath(context);  
========
CGContextSetLineDash(context, 5, lengths, 2);  
CGContextMoveToPoint(context, 0.0, 40.0);    
CGContextAddLineToPoint(context, 310.0, 40.0);  
CGContextStrokePath(context);                 
========      
CGContextSetLineDash(context, 8, lengths, 2);     
CGContextMoveToPoint(context, 0.0, 60.0);             
CGContextAddLineToPoint(context, 310.0, 60.);             
CGContextStrokePath(context);   

如圖顯示:
IOS開發(fā)筆記之繪圖(CGContext小記)

由于lengths值為{10夸盟,5},第一條線就是繪制10像捶,跳過(guò)5上陕,反復(fù)繪制。
第二條線的phase值為5拓春,則首先繪制【10減去5】释簿,再跳過(guò)5,繪制10硼莽,反復(fù)繪制庶溶。
第三條給也如此,先繪制2,再跳過(guò)5渐尿,如此反復(fù)醉途。

================================================================
切線

- (void)drawRect:(CGRect)rect {
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextSetLineWidth(context, 2.0);
        CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
        CGContextMoveToPoint(context, 100, 100);//起始點(diǎn)
        CGContextAddArcToPoint(context, 100,200, 300,200, 100);//點(diǎn)1,點(diǎn)2砖茸,半徑 
        CGContextStrokePath(context);
}
IOS開發(fā)筆記之繪圖(CGContext小記)

================================================================
橢圓

- (void)drawRect:(CGRect)rect {
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextSetLineWidth(context, 2.0);
        CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
        CGRect rectangle = CGRectMake(60,170,200,80);
        CGContextAddEllipseInRect(context, rectangle);
        CGContextStrokePath(context);
}
IOS開發(fā)筆記之繪圖(CGContext小記)

================================================================
曲線

- (void)drawRect:(CGRect)rect {
       CGContextRef context = UIGraphicsGetCurrentContext();
       CGContextSetLineWidth(context, 2.0);
       CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
       CGContextMoveToPoint(context, 10, 10);//起始點(diǎn)
       CGContextAddCurveToPoint(context, 0, 50, 300, 250, 300, 400);//控制點(diǎn)1隘擎,控制點(diǎn)2,終點(diǎn)
       CGContextStrokePath(context);
}
IOS開發(fā)筆記之繪圖(CGContext小記)

================================================================
曲線

- (void)drawRect:(CGRect)rect {
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextSetLineWidth(context, 2.0);
        CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
        CGContextMoveToPoint(context, 10, 200);
        CGContextAddQuadCurveToPoint(context, 150, 10, 300, 200);//控制點(diǎn)1凉夯,終點(diǎn)
        CGContextStrokePath(context);
}
IOS開發(fā)筆記之繪圖(CGContext小記)

================================================================
虛線曲線

- (void)drawRect:(CGRect)rect {
       CGContextRef context = UIGraphicsGetCurrentContext();
       CGContextSetLineWidth(context, 5.0);
       CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
       CGFloat dashArray[] = {2,6,4,2};
       CGContextSetLineDash(context, 3, dashArray, 4);
       CGContextMoveToPoint(context, 10, 200);
       CGContextAddQuadCurveToPoint(context, 150, 10, 300, 200);//控制點(diǎn)1货葬,終點(diǎn)
       CGContextStrokePath(context);
}
IOS開發(fā)筆記之繪圖(CGContext小記)

================================================================
以上引用
更多詳情
更多詳情

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市劲够,隨后出現(xiàn)的幾起案子震桶,更是在濱河造成了極大的恐慌,老刑警劉巖征绎,帶你破解...
    沈念sama閱讀 212,718評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蹲姐,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡人柿,警方通過(guò)查閱死者的電腦和手機(jī)柴墩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)凫岖,“玉大人江咳,你說(shuō)我怎么就攤上這事「绶牛” “怎么了歼指?”我有些...
    開封第一講書人閱讀 158,207評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)甥雕。 經(jīng)常有香客問(wèn)我踩身,道長(zhǎng),這世上最難降的妖魔是什么犀农? 我笑而不...
    開封第一講書人閱讀 56,755評(píng)論 1 284
  • 正文 為了忘掉前任惰赋,我火速辦了婚禮,結(jié)果婚禮上呵哨,老公的妹妹穿的比我還像新娘赁濒。我一直安慰自己,他們只是感情好孟害,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,862評(píng)論 6 386
  • 文/花漫 我一把揭開白布拒炎。 她就那樣靜靜地躺著,像睡著了一般挨务。 火紅的嫁衣襯著肌膚如雪击你。 梳的紋絲不亂的頭發(fā)上玉组,一...
    開封第一講書人閱讀 50,050評(píng)論 1 291
  • 那天,我揣著相機(jī)與錄音丁侄,去河邊找鬼惯雳。 笑死,一個(gè)胖子當(dāng)著我的面吹牛鸿摇,可吹牛的內(nèi)容都是我干的石景。 我是一名探鬼主播,決...
    沈念sama閱讀 39,136評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼拙吉,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼潮孽!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起筷黔,我...
    開封第一講書人閱讀 37,882評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤往史,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后佛舱,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體椎例,經(jīng)...
    沈念sama閱讀 44,330評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,651評(píng)論 2 327
  • 正文 我和宋清朗相戀三年名眉,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了粟矿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,789評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡损拢,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出撒犀,到底是詐尸還是另有隱情福压,我是刑警寧澤,帶...
    沈念sama閱讀 34,477評(píng)論 4 333
  • 正文 年R本政府宣布或舞,位于F島的核電站荆姆,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏映凳。R本人自食惡果不足惜胆筒,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,135評(píng)論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望诈豌。 院中可真熱鬧仆救,春花似錦、人聲如沸矫渔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)庙洼。三九已至顿痪,卻和暖如春镊辕,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蚁袭。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工征懈, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人揩悄。 一個(gè)月前我還...
    沈念sama閱讀 46,598評(píng)論 2 362
  • 正文 我出身青樓卖哎,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親虏束。 傳聞我的和親對(duì)象是個(gè)殘疾皇子棉饶,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,697評(píng)論 2 351

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

  • --繪圖與濾鏡全面解析 概述 在iOS中可以很容易的開發(fā)出絢麗的界面效果,一方面得益于成功系統(tǒng)的設(shè)計(jì)镇匀,另一方面得益...
    韓七夏閱讀 2,718評(píng)論 2 10
  • 簡(jiǎn)介: Core Graphics 和Quartz 2D的區(qū)別 quartz是一個(gè)通用的術(shù)語(yǔ)照藻,用于描述在iOS和M...
    made_China閱讀 1,334評(píng)論 0 1
  • CGContextRef context = UIGraphicsGetCurrentContext(); //設(shè)...
    浪漫紫薇星閱讀 1,093評(píng)論 0 1
  • 華燈初上幸缕,一個(gè)人下班之后待著耳機(jī)站在公交車上,是不是真的有那么愛聽歌晰韵?也許是发乔,也許不是! 之前在一本書上看到一段話...
    旺仔糖閱讀 720評(píng)論 0 0
  • 歡迎收看上篇《曼姝戲子淚一》可以點(diǎn)擊作者主頁(yè)收看雪猪。 兩人癡纏一會(huì)兒之后栏尚,方子清眼見那天色已經(jīng)逐漸暗了下來(lái),用手碰了...
    婉青婉青閱讀 444評(píng)論 2 3