快速上手UIBezierPath

UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般UIBezierPath在drawRect中使用。

使用方法

UIBezierPath 是对 CGPathRef 的封装。创建矢量图形时,拆解成一或多条线段,拼接起来,每条线段的终点都是下一条线段的起点。

具体地:

1.创建一个 UIBezierPath 对象
2.用 moveToPoint: 设置初始线段的起点
3.添加线段,定义一或多个子路径
4.修改 UIBezierPath 的绘图相关的属性,比如stroke path的属性 lineWidth 和 lineJoinStyle ,filled path的属性 usesEvenOddFillRule

注意:如果是矩形或者圆之类的特殊图形,可以不用第2步。

代码案例

  • 画直线
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(50, 50)];
    [path addLineToPoint:CGPointMake(100, 50)];
    
    path.lineWidth = 5.0f;
    path.lineJoinStyle = kCGLineJoinRound;
    
    [path stroke];
直线.png
  • 创建三角形
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(50, 50)];
    [path addLineToPoint:CGPointMake(300, 50)];
    [path addLineToPoint:CGPointMake(200, 150)];
    
    // 最后的闭合线是可以通过调用closePath方法来自动生成的,也可以调用-addLineToPoint:方法来添加
    //  [path addLineToPoint:CGPointMake(50, 50)];

    [path closePath];
    
    path.lineWidth = 5.0f;

    [path stroke];
三角形.png
  • 创建矩形
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 100, 50, 50)];
    
    path.lineWidth = 5.0f;
    
    [path stroke];
矩形.png
  • 创建内切曲线
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 200, 50, 50)];
    
    path.lineWidth = 5.0f;
    
    [path stroke];
圆.png
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 200, 50, 100)];
    
    path.lineWidth = 5.0f;
    
    [path stroke];
椭圆.png
  • 创建带有圆角的矩形,当矩形变成正圆的时候,Radius就不再起作用
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 300, 50, 50) cornerRadius:15.0f];
    
    path.lineWidth = 5.0f;
    
    [path stroke];
带有圆角的矩形.png
  • 设定特定的角为圆角的矩形
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 400, 50, 50) byRoundingCorners:UIRectCornerBottomLeft cornerRadii:CGSizeMake(5,5)];
    
    path.lineWidth = 5.0f;
    
    [path stroke];
特定的角为圆角的矩形.png
  • 创建圆弧
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 550) radius:25 startAngle:0 endAngle:1.5*M_PI clockwise:YES];
    
    path.lineWidth = 5.0f;
    
    [path stroke];
创建圆弧.png
  • 通过路径A创建路径B
    UIBezierPath *path_A = [UIBezierPath bezierPath];
    
    [path_A moveToPoint:CGPointMake(200, 50)];
    
    [path_A addLineToPoint:CGPointMake(250, 100)];
    
    path_A.lineWidth = 5.0f;

    UIBezierPath *path_B = [UIBezierPath bezierPathWithCGPath:path_A.CGPath];
    
    [path_B stroke];
通过路径A创建路径B.png
  • 创建三次贝塞尔曲线
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(100, 200)];
    
    [path addCurveToPoint:CGPointMake(300, 200) controlPoint1:CGPointMake(150, 150) controlPoint2:CGPointMake(250, 250)];
    
    [path stroke];
三次贝塞尔曲线.png
  • 创建二次贝塞尔曲线
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(100, 200)];
    
    [path addQuadCurveToPoint:CGPointMake(300, 200) controlPoint:CGPointMake(150, 150)];
    
    [path stroke];
二次贝塞尔曲线.png
  • 添加圆弧
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(200, 400)];
    [path addLineToPoint:CGPointMake(225, 410)];
    
    [path addArcWithCenter:CGPointMake(200, 400) radius:25 startAngle:0 endAngle:1.5*M_PI clockwise:YES];
    
//    [path closePath];
//    [path removeAllPoints];
    
    [path stroke];
添加圆弧.png
  • 追加路径
    UIBezierPath *path_A = [UIBezierPath bezierPath];
    
    [path_A moveToPoint:CGPointMake(200, 500)];
    [path_A addLineToPoint:CGPointMake(225, 410)];
    
    UIBezierPath *path_B = [UIBezierPath bezierPath];
    
    [path_B moveToPoint:CGPointMake(200, 600)];
    [path_B addLineToPoint:CGPointMake(225, 500)];
    
    [path_A appendPath:path_B];
    
    [path_A stroke];
追加路径.png
  • 创建翻转路径,即起点变成终点,终点变成起点
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(50, 50)];
    [path addLineToPoint:CGPointMake(100, 50)];
    
    path.lineWidth = 5.0f;
    
    NSLog(@"%@",NSStringFromCGPoint(path.currentPoint));
    
    UIBezierPath *path_b = [path bezierPathByReversingPath];
    CGAffineTransform transform = CGAffineTransformMakeTranslation(200, 0);
    [path_b applyTransform: transform];
    // 两条路径分别添加一条直接到 self.center
    [path addLineToPoint: CGPointMake(self.frame.size.width*0.5, self.frame.size.height*0.5)];
    [path_b addLineToPoint: CGPointMake(self.frame.size.width*0.5, self.frame.size.height*0.5)];
    
    NSLog(@"%@",NSStringFromCGPoint(path_b.currentPoint));
    [[UIColor redColor] set];
    [path stroke];
    [[UIColor blueColor] set];
    [path_b stroke];
创建翻转路径.png
  • 路径进行仿射变换
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(100, 50)];
    [path addLineToPoint:CGPointMake(200, 50)];
    
    CGAffineTransform transform =  CGAffineTransformRotate(self.transform, M_PI_4);
    [path applyTransform:transform];
    
    path.lineWidth = 5.0f;
    
    [path stroke];
仿射变换.png
  • 创建虚线
    CGFloat dashStyle[] = {1.0f, 2.0f};

    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(50, 50)];
    [path addLineToPoint:CGPointMake(100, 50)];
    
    [path setLineDash:dashStyle count:2 phase:0.0];
    
    [path stroke];
创建虚线.png
  • 设置颜色
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
    
    [[UIColor greenColor] setStroke];
    
    [[UIColor redColor] setFill];
    
    [path stroke];
    [path fill];
屏幕快照 2017-01-19 下午1.49.31.png
  • 设置描边混合模式
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
    
    [[UIColor greenColor] setStroke];
    
    path.lineWidth = 10.0f;
    
    [path strokeWithBlendMode:kCGBlendModeSaturation alpha:1.0];
    
    [path stroke];
Stroke混合.png
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
    
    [[UIColor redColor] setFill];
    
    [path fillWithBlendMode:kCGBlendModeSaturation alpha:0.6];
    
    [path fill];
Fill混合.png
  • 修改当前图形上下文的绘图区域可见,随后的绘图操作导致呈现内容只有发生在指定路径的填充区域
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
    
    [[UIColor greenColor] setStroke];
    
    [path addClip];
    
    [path stroke];
Clip.png

结语

关于UIBezierPath的简单介绍就到这了,主要是用代码做了展示,属性跟方法,没详细去介绍,我觉得可以直接看苹果的api写的也蛮清楚的.或者自己试试不同的参数样式也能大概理解了.另外简书上看到有篇文章对属性及方法介绍的蛮详细的,可以去看看:UIBezierPath

核心动画跟贝赛尔曲线都有了简单的介绍了,接下来就可以动手做点简单的自定义动画了.会在下一篇更新.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容