基本介紹
使用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];
}
效果圖