iOS UIBezierPath貝塞爾曲線常用方法

關(guān)于 UIBezierPath

UIBezierPath這個類在UIKit中幕与, 是Core Graphics框架關(guān)于path的一個封裝穷吮,使用此類可以定義簡單的形狀宣增,比如我們常用到诲祸,矩形京办,圓形肖油,橢圓,弧臂港,或者不規(guī)則的多邊形

UIBezierPath 基本使用方法

UIBezierPath對象是CGPathRef數(shù)據(jù)類型的封裝森枪。path如果是基于矢量形狀的,都用直線或曲線去創(chuàng)建审孽。我們一般使用UIBezierPath都是在重寫view的drawRect方法這種情形县袱。我們用直線去創(chuàng)建矩形或多邊形,使用曲線創(chuàng)建弧或者圓佑力。創(chuàng)建和使用path對象步驟:

1式散、 重寫View的drawRect方法
2、 創(chuàng)建UIBezierPath的對象
3打颤、 使用方法moveToPoint: 設(shè)置初始點
4暴拄、 根據(jù)具體要求使用UIBezierPath類方法繪圖(比如要畫線漓滔、矩形、圓乖篷、幌炻俊?等)
5撕蔼、 設(shè)置UIBezierPath對象相關(guān)屬性 (比如lineWidth豁鲤、lineJoinStyleaPath.lineCapStyle鲸沮、color
6琳骡、 使用stroke 或者 fill方法結(jié)束繪圖

比如我們想要畫一條線demo:

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set]; //設(shè)置線條顏色

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(10, 10)];
    [path addLineToPoint:CGPointMake(200, 80)];

    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound; //線條拐角
    path.lineJoinStyle = kCGLineJoinRound; //終點處理

    [path stroke];
}

其他基本使用方法

在介紹其他使用方法之前,我們先來看一下 path的幾個屬性讼溺,以便下面我進行設(shè)置楣号。

  1. [color set];設(shè)置線條顏色,也就是相當(dāng)于畫筆顏色

  2. path.lineWidth = 5.0;這個很好理解了怒坯,就是劃線的寬度

  3. path.lineCapStyle這個線段起點是終點的樣式竖席,這個樣式有三種:
    3.1 kCGLineCapButt該屬性值指定不繪制端點, 線條結(jié)尾處直接結(jié)束敬肚。這是默認(rèn)值。
    3.2 kCGLineCapRound 該屬性值指定繪制圓形端點束析, 線條結(jié)尾處繪制一個直徑為線條寬度的半圓艳馒。
    3.3 kCGLineCapSquare 該屬性值指定繪制方形端點。 線條結(jié)尾處繪制半個邊長為線條寬度的正方形员寇。需要說明的是弄慰,這種形狀的端點與“butt”形狀的端點十分相似,只是采用這種形式的端點的線條略長一點而已*

  4. path.lineJoinStyle這個屬性是用來設(shè)置兩條線連結(jié)點的樣式蝶锋,同樣它也有三種樣式供我們選擇
    4.1 kCGLineJoinMiter 斜接
    4.2 kCGLineJoinRound 圓滑銜接
    4.3 kCGLineJoinBevel 斜角連接

  5. [path stroke];用 stroke 得到的是不被填充的 view 陆爽,[path fill]; 用 fill 得到的內(nèi)部被填充的 view,這點在下面的代碼還有繪制得到的圖片中有扳缕,可以體會一下這兩者的不同慌闭。

繪制多邊形

繪制多邊形,實際上就是又一些直線條連成躯舔,主要使用moveToPoint:addLineToPoint:方法去創(chuàng)建驴剔,moveToPoint:這個方法是設(shè)置起始點,意味著從這個點開始粥庄,我們就可以使用addLineToPoint:去設(shè)置我們想要創(chuàng)建的多邊形經(jīng)過的點丧失,也就是兩線相交的那個點,用``` addLineToPoint:``去創(chuàng)建一個形狀的線段惜互,我們可以連續(xù)創(chuàng)建line布讹,每一個line的起點都是先前的終點琳拭,終點就是指定的點,將線段連接起來就是我們想要創(chuàng)建的多邊形了描验。


#import "DrawPolygonView.h"

@implementation DrawPolygonView

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set]; //設(shè)置線條顏色

    UIBezierPath* path = [UIBezierPath bezierPath];
    path.lineWidth = 5.0;

    path.lineCapStyle = kCGLineCapRound; //線條拐角
    path.lineJoinStyle = kCGLineJoinRound; //終點處理

    [path moveToPoint:CGPointMake(200.0, 50.0)];//起點

    // Draw the lines
    [path addLineToPoint:CGPointMake(300.0, 100.0)];
    [path addLineToPoint:CGPointMake(260, 200)];
    [path addLineToPoint:CGPointMake(100.0, 200)];
    [path addLineToPoint:CGPointMake(100, 70.0)];
    [path closePath];//第五條線通過調(diào)用closePath方法得到的

    //    [path stroke];//Draws line 根據(jù)坐標(biāo)點連線
    [path fill];//顏色填充

}

在這里我們可以看到最后第五條線是用[path closePath];得到的白嘁,closePath方法不僅結(jié)束一個shape的subpath表述,它也在最后一個點和第一個點之間畫一條線段挠乳,這個一個便利的方法我們不需要去畫最后一條線了权薯, 哈哈哈哈。這里我們用到的是[path fill];//顏色填充進行坐標(biāo)連點睡扬,但是我們看見的是五邊形內(nèi)部被顏色填充了盟蚣, 如果我們使用[path stroke];那我們得到的就是一個用線畫的五邊形。

畫矩形或者正方形

大家都知道正方形就是特殊的矩形咯卖怜,不多講屎开。只說矩形。

使用+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect這個方法马靠,設(shè)置好坐標(biāo) frame 就好了奄抽,就像我們創(chuàng)建 view 一樣,好理解甩鳄。

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set]; //設(shè)置線條顏色

    UIBezierPath* path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 80)];

    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound; //線條拐角
    path.lineJoinStyle = kCGLineJoinRound; //終點處理

    [path stroke];
}

創(chuàng)建圓形或者橢圓形

使用+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect這個方法創(chuàng)建圓形或者橢圓形逞度。

傳入的rect矩形參數(shù)繪制一個內(nèi)切曲線,如果我們傳入的rect是矩形就得到矩形的內(nèi)切橢圓妙啃,如果傳入的是 正方形得到的就是正方形的內(nèi)切圓档泽。

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set];

    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:90 startAngle:0 endAngle:TO_RADIAUS(120) clockwise:YES];

    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    [path stroke];
}

創(chuàng)建一段弧線

使用+ (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwis這個方法創(chuàng)建一段弧線,介紹一下這個方法中的參數(shù):
ArcCenter: 原點
radius: 半徑
startAngle: 開始角度
endAngle: 結(jié)束角度
clockwise: 是否順時針方向

弧線的參考系:

繪制二次貝塞爾曲線

使用- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint這個方法繪制二次貝塞爾曲線揖赴。曲線段在當(dāng)前點開始馆匿,在指定的點結(jié)束,

一個控制點的切線定義燥滑。下圖顯示了兩種曲線類型的相似渐北,以及控制點和curve形狀的關(guān)系:

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set];

    UIBezierPath *path = [UIBezierPath bezierPath];

    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    /*
     - (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
     Parameters
     endPoint
     The end point of the curve.
     controlPoint
     The control point of the curve.
     */
    [path moveToPoint:CGPointMake(40, 150)];
    [path addQuadCurveToPoint:CGPointMake(140, 200) controlPoint:CGPointMake(20, 40)];
    [path stroke];
}

繪制三次貝塞爾曲線

使用這個方法繪制三次貝塞爾曲線

- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2  
Parameters 

這個方法繪制三次貝塞爾曲線。曲線段在當(dāng)前點開始铭拧,在指定的點結(jié)束赃蛛,兩個控制點的切線定義。下圖顯示了兩種曲線類型的相似搀菩,以及控制點和curve形狀的關(guān)系:

- (void)drawRect:(CGRect)rect {
    /*
     - (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
     Parameters
     endPoint
     The end point of the curve.
     controlPoint1
     The first control point to use when computing the curve.
     controlPoint2
     The second control point to use when computing the curve.
     */

    UIColor *color = [UIColor redColor];
    [color set];

    UIBezierPath *path = [UIBezierPath bezierPath];

    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;

    [path moveToPoint:CGPointMake(20, 200)];
    [path addCurveToPoint:CGPointMake(260, 200) controlPoint1:CGPointMake(140, 0) controlPoint2:CGPointMake(140, 400)];
    [path stroke];
}

畫帶圓角的矩形

使用+ (instancetype)bezierPathWithRect:(CGRect)rect;這個方法繪制焊虏,這個方法和bezierPathWithRect:類似,繪制一個帶內(nèi)切圓的矩形秕磷。

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set]; //設(shè)置線條顏色

    UIBezierPath* path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 80)];

    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound; //線條拐角
    path.lineJoinStyle = kCGLineJoinRound; //終點處理

    [path stroke];
}

指定矩形的某個角為圓角

使用+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;

typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
    UIRectCornerTopLeft     = 1 << 0,
    UIRectCornerTopRight    = 1 << 1,
    UIRectCornerBottomLeft  = 1 << 2,
    UIRectCornerBottomRight = 1 << 3,
    UIRectCornerAllCorners  = ~0UL
}; UIRectCorner 用來指定需要設(shè)置的角诵闭。cornerRadii 圓角的半徑

-   (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];

    [color set];
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 100) byRoundingCorners:UIRectCornerTopRight cornerRadii:CGSizeMake(20, 20)];
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    path.lineWidth = 5.0;
    [path stroke];

 }

總結(jié):- (void)drawRect:(CGRect)rect有會導(dǎo)致內(nèi)存問題不建議使用,這里使用只是為了演示方便,實際開發(fā)中我們還要結(jié)合CAShapeLayer來生成自己想要的圖形疏尿。后續(xù)有時間會更新瘟芝,歡迎交流。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末褥琐,一起剝皮案震驚了整個濱河市锌俱,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌敌呈,老刑警劉巖贸宏,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異磕洪,居然都是意外死亡吭练,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進店門析显,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鲫咽,“玉大人,你說我怎么就攤上這事谷异》质” “怎么了?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵歹嘹,是天一觀的道長箩绍。 經(jīng)常有香客問我,道長尺上,這世上最難降的妖魔是什么材蛛? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮尖昏,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘构资。我一直安慰自己抽诉,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布吐绵。 她就那樣靜靜地躺著迹淌,像睡著了一般。 火紅的嫁衣襯著肌膚如雪己单。 梳的紋絲不亂的頭發(fā)上唉窃,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天,我揣著相機與錄音纹笼,去河邊找鬼纹份。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的蔓涧。 我是一名探鬼主播件已,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼元暴!你這毒婦竟也來了篷扩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤茉盏,失蹤者是張志新(化名)和其女友劉穎鉴未,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鸠姨,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡铜秆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了享怀。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片羽峰。...
    茶點故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖添瓷,靈堂內(nèi)的尸體忽然破棺而出梅屉,到底是詐尸還是另有隱情,我是刑警寧澤鳞贷,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布坯汤,位于F島的核電站,受9級特大地震影響搀愧,放射性物質(zhì)發(fā)生泄漏惰聂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一咱筛、第九天 我趴在偏房一處隱蔽的房頂上張望搓幌。 院中可真熱鬧,春花似錦迅箩、人聲如沸溉愁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽拐揭。三九已至,卻和暖如春奕塑,著一層夾襖步出監(jiān)牢的瞬間堂污,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工龄砰, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留盟猖,地道東北人讨衣。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像扒披,于是被迫代替她去往敵國和親值依。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,884評論 2 354

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