UIBezier簡介

基本介紹

使用UIBezierPath可以創(chuàng)建基于矢量的路徑缭召,此類是Core Graphics框架關(guān)于路徑的封裝。使用此類可以定義簡單的形狀轧膘,如橢圓讥此、矩形或者有多個(gè)直線和曲線段組成的形狀等。

UIBezierPath是CGPathRef數(shù)據(jù)類型的封裝摩窃。如果是基于矢量形狀的路徑兽叮,都用直線和曲線去創(chuàng)建。我們使用直線段去創(chuàng)建矩形和多邊形猾愿,使用曲線去創(chuàng)建圓火写稀(arc)、圓或者其他復(fù)雜的曲線形狀蒂秘。

使用方法

1.創(chuàng)建一個(gè)UIBezierPath對象

2.調(diào)用-moveToPoint:設(shè)置初始線段的起點(diǎn)

3.添加線或者曲線去定義一個(gè)或者多個(gè)子路徑

4.改變UIBezierPath對象跟繪圖相關(guān)的屬性泽本。如,我們可以設(shè)置畫筆的屬性姻僧、填充樣式等

具體實(shí)戰(zhàn)

1.畫直線

- (void)drawRect:(CGRect)rect{

//創(chuàng)建path

UIBezierPath *path = [UIBezierPath bezierPath];

//添加路徑到path

[path moveToPoint:CGPointMake(100, 100)];

[path addLineToPoint:CGPointMake(200, 100)];

//將path繪制出來

[path stroke];

}

2.畫三角形

UIBezierPath *path = [UIBezierPath bezierPath];

[path moveToPoint:CGPointMake(0, 0)];

[path addLineToPoint:CGPointMake(0, self.frame.size.height)];

[path addLineToPoint:CGPointMake(self.frame.size.width, self.frame.size.height / 2)];

[path closePath];

//設(shè)置線寬

[path setLineWidth:1.5];

//設(shè)置填充色

[[UIColor purpleColor] setFill];

//設(shè)置畫壁顏色

[[UIColor greenColor] setStroke];

//填充

[path fill];

//劃線

[path stroke];


3.畫矩形

?? UIBezierPath * path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 100, self.frame.size.width - 40, self.frame.size.width - 40)];

?? [path setLineWidth:20];

? [path setLineCapStyle:kCGLineCapRound];

/**

*設(shè)置線條拐角帽的樣式的

*typedef CF_ENUM(int32_t, CGLineCap) {

*kCGLineCapButt,//默認(rèn)

*kCGLineCapRound,//圓角

*kCGLineCapSquare//正方形

*};

*/

//[path setLineJoinStyle:kCGLineJoinRound];

/**

*設(shè)置兩條線連結(jié)點(diǎn)的樣式

*typedef CF_ENUM(int32_t, CGLineJoin) {

*kCGLineJoinMiter,//默認(rèn)规丽,斜接

*kCGLineJoinRound,//圓滑銜接

*kCGLineJoinBevel//斜角銜接

*/

//設(shè)置填充色

?? [[UIColor purpleColor] setFill];

? [path fill];

?? [[UIColor blueColor] setStroke];

?? [path stroke];

效果圖


4.畫圓(當(dāng)傳入的寬蒲牧、高參數(shù)相等則為圓,否則為橢圓)

?? UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 100, self.frame.size.width - 40, self.frame.size.width - 40)];

?[path setLineWidth:5];

?? [[UIColor redColor] setFill];

? [path fill];

? [[UIColor greenColor] setStroke];

? ? [path stroke];

效果圖

5.圓角矩形

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 100, self.frame.size.width - 40, self.frame.size.width) cornerRadius:20];

//+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;//該方法設(shè)置某一角為圓角

[[UIColor redColor] setFill];

[path fill];

[[UIColor greenColor] setStroke];

[path stroke];

效果圖

6.弧線

#define K_PI 3.1415926

#define KDEGREESTORADIANS(degrees) ((K_PI * degrees) / 180)

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:self.center radius:100 startAngle:0 endAngle:KDEGREESTORADIANS(275) clockwise:YES];

[path setLineWidth:10];

[path setLineCapStyle:kCGLineCapRound];

[path setLineJoinStyle:kCGLineJoinRound];

[[UIColor grayColor] setStroke];

[path stroke];

效果圖

7.二次貝塞爾曲線

UIBezierPath *path = [UIBezierPath bezierPath];

//起始點(diǎn)

[path moveToPoint:CGPointMake(20, self.frame.size.height - 100)];

//添加二次曲線

[path addQuadCurveToPoint:CGPointMake(self.frame.size.width - 20, self.frame.size.height - 100) controlPoint:CGPointMake(self.frame.size.width / 2, 0)];

[path setLineWidth:10.0];

[[UIColor blueColor] setStroke];

[path stroke];

效果圖

8.三次貝塞爾曲線

UIBezierPath *path = [UIBezierPath bezierPath];

//設(shè)置起點(diǎn)

[path moveToPoint:CGPointMake(20, 150)];

[path addCurveToPoint:CGPointMake(300, 150) controlPoint1:CGPointMake(160, 0) controlPoint2:CGPointMake(160, 250)];

[path setLineWidth:10.0];

[[UIColor greenColor] setStroke];

[path stroke];

效果圖

9.點(diǎn)擊事件


@interface RectView ()

@property (nonatomic,strong)UIBezierPath *path;

@end

//初始化

UIBezierPath *path = [UIBezierPath bezierPath];

//設(shè)置起始位置

[path moveToPoint:CGPointMake(10, 10)];

[path addLineToPoint:CGPointMake(20, 60)];

[path addLineToPoint:CGPointMake(40, 80)];

[path setLineWidth:5];

//設(shè)置線帽

//? ? [path setLineCapStyle:kCGLineCapRound];

//拐角樣式

[path setLineJoinStyle:kCGLineJoinRound];

//閉合

[path closePath];

//設(shè)置線的顏色

[[UIColor redColor] setStroke];

//'設(shè)置填充的顏色

[[UIColor greenColor] setFill];

//劃線

[path stroke];

//填充

[path fill];

self.path = path;

- (void)touchesEnded:(NSSet*)touches withEvent:(UIEvent *)event{

//獲取到點(diǎn)擊的點(diǎn)

UITouch *touch = touches.anyObject;

//該店在view上的坐標(biāo)

CGPoint point = [touch locationInView:self];

if ([self.path containsPoint:point]) {

NSLog(@"該店在三角形內(nèi)");

}

10.滑動事件

@implementation RectView{

CGPoint _point;

}

UIBezierPath *path = [UIBezierPath bezierPath];

[path addArcWithCenter:_point radius:10 startAngle:0 endAngle:2 * M_PI clockwise:YES];

[[UIColor redColor] setFill];

[[UIColor blueColor] setStroke];

[path stroke];

[path fill];

- (void)touchesMoved:(NSSet*)touches withEvent:(UIEvent *)event{

UITouch *touch = touches.anyObject;

CGPoint point = [touch locationInView:self];

_point = point;

[self setNeedsDisplay];

}

效果圖

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末赌莺,一起剝皮案震驚了整個(gè)濱河市冰抢,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌艘狭,老刑警劉巖挎扰,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異巢音,居然都是意外死亡遵倦,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進(jìn)店門港谊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來骇吭,“玉大人橙弱,你說我怎么就攤上這事歧寺。” “怎么了棘脐?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵斜筐,是天一觀的道長。 經(jīng)常有香客問我蛀缝,道長顷链,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任屈梁,我火速辦了婚禮嗤练,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘在讶。我一直安慰自己煞抬,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布构哺。 她就那樣靜靜地躺著革答,像睡著了一般。 火紅的嫁衣襯著肌膚如雪曙强。 梳的紋絲不亂的頭發(fā)上残拐,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天,我揣著相機(jī)與錄音碟嘴,去河邊找鬼溪食。 笑死,一個(gè)胖子當(dāng)著我的面吹牛娜扇,可吹牛的內(nèi)容都是我干的错沃。 我是一名探鬼主播边败,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼捎废!你這毒婦竟也來了笑窜?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤登疗,失蹤者是張志新(化名)和其女友劉穎排截,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體辐益,經(jīng)...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡断傲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了智政。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片认罩。...
    茶點(diǎn)故事閱讀 40,503評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖续捂,靈堂內(nèi)的尸體忽然破棺而出垦垂,到底是詐尸還是另有隱情,我是刑警寧澤牙瓢,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布劫拗,位于F島的核電站,受9級特大地震影響矾克,放射性物質(zhì)發(fā)生泄漏页慷。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一胁附、第九天 我趴在偏房一處隱蔽的房頂上張望酒繁。 院中可真熱鬧,春花似錦控妻、人聲如沸州袒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽稳析。三九已至,卻和暖如春弓叛,著一層夾襖步出監(jiān)牢的瞬間彰居,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工撰筷, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留陈惰,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓毕籽,卻偏偏與公主長得像抬闯,于是被迫代替她去往敵國和親井辆。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評論 2 359

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