UIBezierPath绘制基本图形

说到绘图, 就想到UIView中的一个方法: drawRect方法, 那么简单介绍一下它的作用:

1. 可以将图形绘制到, view上(因为在该方法中, 可以获取到跟view相关联的图形上下文.)
2. 什么时候被调用?
    2.1 在View第一次显示到屏幕上时.(被加载到UIWindow上显示出来的时候);
    2.2 在调用View的setNeedsDisplay: 或者 setNeedsDisplayInRect: 的时候
3. rect : 是当前控件的bounds ```
***

 >###UIBezierPath的基本使用:
  1. UIBezierPath对象, 是对CGPathRef数据类型的封装. path如果是基于矢量图(面向对象图形, 或者是绘图图像), 都用直线或者曲线去创建.
  2. 使用直线, 创建矩形和多边形 / 使用曲线段, 创建弧, 圆形或者其他复杂曲线形状.
  3. 每一段都包括一个,或者多个点.
  4. 每一个直线段/曲线段结束的地方, 就是下一个线段开始的地方.
  5. 每一个连接的直线段或者曲线段的集合, 称为: subPath.
  6. 一个UIBezierPath对象, 定义一个完整的路径, 包括一个或者多个subPath.
  7. 创建path对象, 使用Path对象的过程, 是分开的, 创建path是第一步,具体步骤如下:
    7.1: 创建一个Path对象.
    7.2: 使用moveToPoint: 去设置出线段的起点.```

绘图实例(一下所有方法, 都必须在drawRect方法中调用), 一下代码都是必要的基础代码, 路径的属性进行简单描述.

1. 绘制值线段


- (void)path1{
    
    //1. 创建路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    //2. 设置起始点
    [path moveToPoint:CGPointMake(20, 20)];
    
    //3. 设置结束点(即第二条线段的开始点)
    [path addLineToPoint:CGPointMake(100, 100)];
    
    //4.  连线
    [path stroke];
#********************************************************    
#描述:     
 线和多边形是一些简单形状, 可以使用moveToPoint: 或者addLineToPoint: 方法去构建. 
moveToPoint: 设置我们想要创建形状的起点, 从该点开始我们可以使用方法addLineToPoint: 
去创建一个形状的线段, 也可以连续的创建line, 每一个line的起点都是先前线段的终点, 
终点就是制定的点CGPointMake.

#路径属性:(路径的属性都应该写在绘制路径前面才能有效)
线宽 
   path.lineWidth = 5.0;
线段颜色
   UIColor *color = [UIColor orangeColor];
   [color set];
线条拐角
    path.lineCapStyle = kCGLineCapRound;
连接点
    path.lineJoinStyle = kCGLineJoinRound;
#********************************************************        
    
}```
####2. 绘制多边型(在绘制线段的基础上)
```code
- (void)path2{
    
    //1. 绘制路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    //2. 设置起始点
    [path moveToPoint:CGPointMake(20, 100)];
    
    //3. 添加线段(通过给出的点, 连接出路径)
    [path addLineToPoint:CGPointMake(100, 100)];
    [path addLineToPoint:CGPointMake(30, 200)];
    [path addLineToPoint:CGPointMake(50, 50)];
    [path addLineToPoint:CGPointMake(70, 200)];
    
    //4. 闭合路径
    [path closePath];
    
    //5. 绘制路径
    [path stroke];
}```
####3. 利用图形上下文绘制直线
```code
- (void)contextDraw{
    
    //1. 获取当前的上下文
    CGContextRef cxt = UIGraphicsGetCurrentContext();
    
    //2. 设置起始点
    CGContextMoveToPoint(cxt, 20, 100);
    
    //3. 设置中的
    CGContextAddLineToPoint(cxt, 100, 50);
    
    //4. 渲染上下文
    CGContextDrawPath(cxt, kCGPathStroke);

#属性: 图形上下文的属性************************************
    //线宽
    CGContextSetLineWidth(cxt, 50.0);
    //颜色
    CGContextSetRGBStrokeColor(cxt, 0, 1, 0, 1);
    //[[UIColor redColor] set];
    //线的样式
    CGContextSetLineCap(cxt, kCGLineCapRound);
    //填充
    [[UIColor greenColor] setFill];
#********************************************************    
    
}```

####4. 利用上下文绘制曲线
```code
- (void)drawCurveLine{
    
    //1. 获取图形上下文
    CGContextRef cxt = UIGraphicsGetCurrentContext();
    
    //2. 创建路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    //3. 设置起始点
    [path moveToPoint:CGPointMake(20, 50)];
    
 *  //4. 设置曲线
    [path addCurveToPoint:CGPointMake(200, 50) controlPoint1:CGPointMake(50, 20) controlPoint2:CGPointMake(80, 90)];
    
    //5. 将路径添加到上下文
    CGContextAddPath(cxt, path.CGPath);
    
    //6. 渲染上下文
    CGContextDrawPath(cxt, kCGPathStroke);
    
    
}```
####5. 利用上下文绘制矩形
```code
- (void)drawSquare{
    
    //1. 获取图形上下文
    CGContextRef cxt = UIGraphicsGetCurrentContext();
    
 *  //2. 绘制路径
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 150, 150) cornerRadius:0];
    
    //3. 将路径添加到上下文
    CGContextAddPath(cxt, path.CGPath);
    
    //4. 渲染
    CGContextDrawPath(cxt, kCGPathStroke);
}```
####6. 利用上下文绘制弧形
```code
- (void)drawBow{
    
    //1. 获取图形上下文
    CGContextRef cxt = UIGraphicsGetCurrentContext();
    
 *  //2. 绘制路径
    //参数一: 表示弧形的终点
    //参数二: 表示起始角度(0代表: X轴正半轴, Y为0 的角度)
    //参数三: 表示结束位置的角度
    //参数四: 表示是否是顺时针绘制
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 50) radius:50 startAngle:0 endAngle:M_PI_2 clockwise:YES];
    
    //3. 添加到上下文
    CGContextAddPath(cxt, path.CGPath);
    
    //4. 渲染
    CGContextDrawPath(cxt, kCGPathStroke);
}```
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,402评论 6 499
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,377评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,483评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,165评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,176评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,146评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,032评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,896评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,311评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,413评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,008评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2 353

推荐阅读更多精彩内容