UIBezierPath

使用UIBezierPath類可以創(chuàng)建基于矢量的路徑患膛,這個類在UIKit中。此類是Core Graphics框架關(guān)于path的一個封裝耻蛇。

UIBezierPath對象是CGPathRef數(shù)據(jù)類型的封裝踪蹬。path如果是基于矢量形狀的,都用直線和曲線段去創(chuàng)建臣咖。我們使用直線段去創(chuàng)建矩形和多邊形跃捣,使用曲線段去創(chuàng)建弧(arc)夺蛇,圓或者其他復(fù)雜的曲線形狀疚漆。每一段都包括一個或者多個點,繪圖命令定義如何去詮釋這些點刁赦。每一個直線段或者曲線段的結(jié)束的地方是下一個的開始的地方娶聘。每一個連接的直線或者曲線段的集合成為subpath。一個UIBezierPath對象定義一個完整的路徑包括一個或者多個subpaths甚脉。

使用UIBezierPath畫圖步驟:

0丸升、 重寫View的drawRect方法
1、創(chuàng)建一個UIBezierPath對象
2牺氨、調(diào)用-moveToPoint設(shè)置初始線段的起點
3狡耻、添加線或曲線去定義一個或者多個子路徑
4墩剖、改變UIBezierPath對象跟繪圖相關(guān)的屬性(畫筆顏色,填充樣式等)

0x01 對象創(chuàng)建

//該方法使用較多(自定義樣式方便)
+ (instancetype)bezierPath;

//根據(jù)一個矩形畫貝塞爾曲線
+ (instancetype)bezierPathWithRect:(CGRect)rect;

//根據(jù)一個矩形畫內(nèi)切曲線
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

//根據(jù)一個矩形畫內(nèi)切曲線夷狰。通常用它來畫圓或者橢圓
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; 
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
第一個工廠方法是畫矩形涛碑,但是這個矩形是可以畫圓角的。第一個參數(shù)是矩形孵淘,第二個參數(shù)是圓角大小蒲障。
第二個工廠方法功能是一樣的,但是可以指定某一個角畫成圓角瘫证。像這種我們就可以很容易地給UIView擴展添加圓角的方法了揉阎。

//畫圓弧
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
center: 弧線中心點的坐標(biāo)
radius: 弧線所在圓的半徑
startAngle: 弧線開始的角度值
endAngle: 弧線結(jié)束的角度值
clockwise: 是否順時針畫弧線

+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;

0x02簡單圖形繪制

/**
畫矩形
*/

- (void)drawShape {

    //創(chuàng)建對象(也可以直接用矩形繪制)
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    
    //路徑
    [bezierPath moveToPoint:CGPointMake(20, 400)];
    [bezierPath addLineToPoint:CGPointMake(20, 440)];
    [bezierPath addLineToPoint:CGPointMake(80, 440)];
    [bezierPath addLineToPoint:CGPointMake(80, 400)];
    
    //閉合(可選擇路徑閉合 也可選擇添加第一個點)
    [bezierPath closePath];
    
    //線寬
    bezierPath.lineWidth = 1.5f;
    //線條拐角處理
    //kCGLineCapButt,
    //kCGLineCapRound,
    //kCGLineCapSquare
    bezierPath.lineCapStyle = kCGLineCapRound;
    
    //終點處理
    //kCGLineJoinMiter, 斜接
    //kCGLineJoinRound, 圓滑銜接
    //kCGLineJoinBevel  邪教連接
    bezierPath.lineJoinStyle = kCGLineJoinRound;
    
    /////////////////////設(shè)置當(dāng)填充顏色和畫筆顏色同時存在時,要先設(shè)置畫筆顏色/////////////////////
    // 設(shè)置填充顏色
    UIColor *fillColor = [UIColor greenColor];
    [fillColor set];
    [bezierPath fill];
    
    
    //畫筆顏色設(shè)置
    UIColor *strokeColor = [UIColor blueColor];
    [strokeColor setStroke];
    
    //根據(jù)坐標(biāo)點連線
    [bezierPath stroke];
    
    //顏色填充
    //    [bezierPath fill];
}

/**
畫圓弧
*/

- (void)drawARC {

    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.center.x, self.center.y) radius:40.f startAngle:kDEGREES_TO_RADIANS(0) endAngle:kDEGREES_TO_RADIANS(270) clockwise:YES];
    
    bezierPath.lineWidth = 4.f;
    
    UIColor *strokeColor = [UIColor greenColor];
    [strokeColor setStroke];
    
    [bezierPath stroke];
}

畫弧參數(shù)startAngle和endAngle使用的是弧度背捌,而不是角度毙籽,因此我們需要將常用的角度轉(zhuǎn)換成弧度。毡庆。如果設(shè)置的clockwise:YES是順時針方向繪制坑赡。

/**
畫二次貝塞爾曲線
*/

- (void)drawSecondBezierPath {
    
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    
    [bezierPath moveToPoint:CGPointMake(20, 40)];
    [bezierPath addQuadCurveToPoint:CGPointMake(200, 300) controlPoint:CGPointMake(100, 200)];
    
    bezierPath.lineWidth = 10.f;
    
    UIColor *strokeColor = [UIColor purpleColor];
    [strokeColor setStroke];
    
    [bezierPath stroke];
}

endPoint:終端點
controlPoint:控制點,對于二次貝塞爾曲線么抗,只有一個控制點


二次貝塞爾曲線.png

/**
三次貝塞爾曲線
*/

- (void)drawThirdBezierPath {
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    
    // 設(shè)置起始端點
    [bezierPath moveToPoint:CGPointMake(20, 150)];
    
    [bezierPath addCurveToPoint:CGPointMake(300, 150)
            controlPoint1:CGPointMake(160, 0)
            controlPoint2:CGPointMake(160, 250)];
    
    bezierPath.lineCapStyle = kCGLineCapRound;
    bezierPath.lineJoinStyle = kCGLineJoinRound;
    bezierPath.lineWidth = 5.0;
    
    UIColor *strokeColor = [UIColor redColor];
    [strokeColor setStroke];

    [bezierPath stroke];
}
三次貝塞爾曲線.png

組成是起始端點+控制點1+控制點2+終止端點

0x03效果圖

效果圖.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末毅否,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子蝇刀,更是在濱河造成了極大的恐慌螟加,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,207評論 6 521
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件吞琐,死亡現(xiàn)場離奇詭異捆探,居然都是意外死亡,警方通過查閱死者的電腦和手機站粟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,455評論 3 400
  • 文/潘曉璐 我一進店門黍图,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人奴烙,你說我怎么就攤上這事助被。” “怎么了缸沃?”我有些...
    開封第一講書人閱讀 170,031評論 0 366
  • 文/不壞的土叔 我叫張陵恰起,是天一觀的道長修械。 經(jīng)常有香客問我趾牧,道長,這世上最難降的妖魔是什么肯污? 我笑而不...
    開封第一講書人閱讀 60,334評論 1 300
  • 正文 為了忘掉前任翘单,我火速辦了婚禮吨枉,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘哄芜。我一直安慰自己貌亭,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,322評論 6 398
  • 文/花漫 我一把揭開白布认臊。 她就那樣靜靜地躺著圃庭,像睡著了一般。 火紅的嫁衣襯著肌膚如雪失晴。 梳的紋絲不亂的頭發(fā)上剧腻,一...
    開封第一講書人閱讀 52,895評論 1 314
  • 那天,我揣著相機與錄音涂屁,去河邊找鬼书在。 笑死,一個胖子當(dāng)著我的面吹牛拆又,可吹牛的內(nèi)容都是我干的儒旬。 我是一名探鬼主播,決...
    沈念sama閱讀 41,300評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼帖族,長吁一口氣:“原來是場噩夢啊……” “哼栈源!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起竖般,我...
    開封第一講書人閱讀 40,264評論 0 277
  • 序言:老撾萬榮一對情侶失蹤凉翻,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后捻激,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體制轰,經(jīng)...
    沈念sama閱讀 46,784評論 1 321
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,870評論 3 343
  • 正文 我和宋清朗相戀三年胞谭,在試婚紗的時候發(fā)現(xiàn)自己被綠了垃杖。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,989評論 1 354
  • 序言:一個原本活蹦亂跳的男人離奇死亡丈屹,死狀恐怖调俘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情旺垒,我是刑警寧澤彩库,帶...
    沈念sama閱讀 36,649評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站先蒋,受9級特大地震影響骇钦,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜竞漾,卻給世界環(huán)境...
    茶點故事閱讀 42,331評論 3 336
  • 文/蒙蒙 一眯搭、第九天 我趴在偏房一處隱蔽的房頂上張望窥翩。 院中可真熱鬧,春花似錦鳞仙、人聲如沸寇蚊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,814評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽仗岸。三九已至,卻和暖如春借笙,著一層夾襖步出監(jiān)牢的瞬間爹梁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,940評論 1 275
  • 我被黑心中介騙來泰國打工提澎, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留姚垃,地道東北人。 一個月前我還...
    沈念sama閱讀 49,452評論 3 379
  • 正文 我出身青樓盼忌,卻偏偏與公主長得像积糯,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子谦纱,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,995評論 2 361

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