UIBezierPath基础学习


UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的,都用直线和曲线段去创建。我们使用直线段去创建矩形和多边形,使用曲线段去创建弧(arc),圆或者其他复杂的曲线形状。每一段都包括一个或者多个点,绘图命令定义如何去诠释这些点。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。

UIBezierPath 的常用属性

  • CGPath:将UIBezierPath类转换成CGPath,类似于UIColor的CGColor
  • currentPoint:当前path的位置,可以理解为path的终点
  • lineWidth:path宽度
  • lineCapStyle:path端点样式枚举,有3种样式
    kCGLineCapButt, // 无端点
    kCGLineCapRound, // 圆形端点
    kCGLineCapSquare // 方形端点(样式上和kCGLineCapButt是一样的,但是比kCGLineCapButt长一点)
  • lineJoinStyle:拐角样式枚举,有3种样式
    kCGLineJoinMiter, // 尖角
    kCGLineJoinRound, // 圆角
    kCGLineJoinBevel // 缺角
  • miterLimit:最大斜接长度(只有在使用kCGLineJoinMiter是才有效), 边角的角度越小,斜接长度就会越大,为了避免斜接长度过长,使用lineLimit属性限制,如果斜接长度超过miterLimit,边角就会以KCALineJoinBevel类型来显示

实例

矩形
- (void)drawRect:(CGRect)rect {
    // Drawing code
    [[UIColor redColor] setFill];
    UIRectFill(CGRectMake(20, 20, 100, 50));

    [[UIColor redColor] set]; //设置线条颜色
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(150, 20, 100, 50)];

    path.lineWidth = 8.0;
    path.lineCapStyle = kCGLineCapRound; //线条拐角
    path.lineJoinStyle = kCGLineJoinRound; //终点处理
    [path stroke];
}
多边形
- (void)drawRect:(CGRect)rect {
    // Drawing code
    UIBezierPath *path = [UIBezierPath bezierPath];
    [[UIColor redColor] set];
    path.lineWidth = 5.0;

    // 起点
    [path moveToPoint:CGPointMake(100, 10)];

    // 绘制线条
    [path addLineToPoint:CGPointMake(100, 60)];
    [path addLineToPoint:CGPointMake(80, 70)];
    [path addLineToPoint:CGPointMake(50, 60)];
    [path addLineToPoint:CGPointMake(30, 60)];
    [path closePath];//第五条线通过调用closePath方法得到的

    //根据坐标点连线
    [path stroke];
 //    [path fill];
}
椭圆、圆
- (void)drawRect:(CGRect)rect {
    // Drawing code
    UIColor *color = [UIColor colorWithRed:0 green:0 blue:0.7 alpha:1];
    [color set];

    UIBezierPath *path1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 40, 40)];
    path1.lineWidth = 8.0;
    [path1 stroke];

    UIBezierPath *path2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(120, 20, 80, 40)];
    path2.lineWidth = 8.0;
    [path2 stroke];
}
弧线
- (void)drawRect:(CGRect)rect {
    // Drawing code
    [[UIColor redColor] set];
    /*
     center 圆形
     radius 半径
     startAngle 起始角
     endAngle 弧度
     clockwise 顺时针1 逆时针0
     */
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(80, 40)
                                                        radius:40
                                                    startAngle:0
                                                      endAngle:0.5*M_PI
                                                     clockwise:NO];
    path.lineWidth = 5.0;
    [path stroke];
}
曲线

- (void)drawRect:(CGRect)rect {
// Drawing code
UIBezierPath *path = [UIBezierPath bezierPath];
[[UIColor redColor] set];

    // 二次贝塞尔曲线
    path.lineWidth = 2.0;
    [path moveToPoint:CGPointMake(20, 60)];
    [path addQuadCurveToPoint:CGPointMake(120, 60) controlPoint:CGPointMake(70, 0)];
    [path stroke];

    [path moveToPoint:CGPointMake(150, 10)];
    [path addQuadCurveToPoint:CGPointMake(300, 70) controlPoint:CGPointMake(200, 60)];
    [path stroke];

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

推荐阅读更多精彩内容