UIBezierPath类可以创建基于矢量的路径,可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状。

一、UIBezierPath使用:

1、创建path;

2、添加路径到path;

3、将path绘制出来;

1 //创建path
2     path = [UIBezierPath bezierPath];
3     //添加路径
4     [path moveToPoint:(CGPoint){10,50}];
5     [path addLineToPoint:(CGPoint){100,50}];
6     //将path绘制出来
7     [path stroke];
8

二、实例

1、绘制多边形

注意:这个类要继承自UIView。

1 #import "Draw.h"
 2 
 3 @interface Draw (){
 4     
 5 UIBezierPath *path;
 6 
 7 }
 8 
 9 @end
10 
11 - (void)drawRect:(CGRect)rect {
12     
13     //线条颜色
14     UIColor *color = [UIColor orangeColor];
15     [color set];
16     
17     //创建path
18     path = [UIBezierPath bezierPath];
19     //设置线宽
20     path.lineWidth = 3;
21     //线条拐角
22     path.lineCapStyle = kCGLineCapRound;
23     //终点处理
24     path.lineJoinStyle = kCGLineJoinRound;
25 
26     [path moveToPoint:(CGPoint){100,100}];
27     [path addLineToPoint:(CGPoint){200,100}];
28     [path addLineToPoint:(CGPoint){250,150}];
29     [path addLineToPoint:(CGPoint){200,200}];
30     [path addLineToPoint:(CGPoint){100,200}];
31     [path addLineToPoint:(CGPoint){50,150}];
32     [path closePath];
33     //根据坐标点连线
34     
35     [path stroke];
36     
37 }

ios UIBezierPath ios uibezierpath stroke_连线

如果修改最后一句代码将[path stroke]改成[path fill];

下面来看看区别,

ios UIBezierPath ios uibezierpath stroke_连线_02

2、绘制矩形

+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect;

1 - (void)drawRect:(CGRect)rect {
 2     
 3     //线条颜色
 4     UIColor *color = [UIColor orangeColor];
 5     [color set];
 6     
 7     //创建path
 8     //rect四个值分别为(x、y、矩形长,矩形宽)
 9     path = [UIBezierPath bezierPathWithRect:(CGRect){10,20,100,50}];
10     //设置线宽
11     path.lineWidth = 3;
12     //线条拐角
13     path.lineCapStyle = kCGLineCapRound;
14     //终点处理
15     path.lineJoinStyle = kCGLineJoinRound;
16     
17     //根据坐标点连线
18     [path stroke];
19     
20 }

ios UIBezierPath ios uibezierpath stroke_ios UIBezierPath_03

 

3、绘制圆形或椭圆形

绘制圆形或椭圆形,我们我用

+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect;

这个方法根据传入的rect矩形参数绘制一个内切曲线。

当传入的rect是一个正方形时,绘制的图像是一个内切圆;当传入的rect是一个长方形时,绘制的图像是一个内切椭圆。

1 - (void)drawRect:(CGRect)rect {
 2     
 3     //线条颜色
 4     UIColor *color = [UIColor orangeColor];
 5     [color set];
 6     
 7     //添加路径
 8     path = [UIBezierPath bezierPathWithOvalInRect:(CGRect){50,50,100,100}];
 9     path.lineWidth = 3;
10     //线条拐角
11     path.lineCapStyle = kCGLineCapRound;
12     //终点处理
13     path.lineJoinStyle = kCGLineJoinRound;
14     //根据坐标点连线
15     [path stroke];
16     
17 }

ios UIBezierPath ios uibezierpath stroke_#import_04

下面改变rect值,

path = [UIBezierPath bezierPathWithOvalInRect:(CGRect){50,50,100,50}];

ios UIBezierPath ios uibezierpath stroke_ios UIBezierPath_05

 

4、绘制弧线

绘制弧线用方法:

+ (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center

                   radius:(CGFloat)radius

                 startAngle:(CGFloat)startAngle

                  endAngle:(CGFloat)endAngle

                  clockwise:(BOOL)clockwise;

 其中 Center:圆弧的中心;

    radius:半径;

  startAngle:开始角度;

   endAngle:结束角度;

   clockwise:是否顺时针方向;

#import "Draw.h"
//定义PI值
#define PI 3.14159265359

@interface Draw (){
    
UIBezierPath *path;

}

- (void)drawRect:(CGRect)rect {
    
    //线条颜色
    UIColor *color = [UIColor orangeColor];
    [color set];
    
    //添加路径
    path = [UIBezierPath bezierPathWithArcCenter:(CGPoint){100,50}
                                          radius:50
                                      startAngle:0
                                        endAngle:PI*0.5
                                       clockwise:YES
            ];
    path.lineWidth = 3;
    //线条拐角
    path.lineCapStyle = kCGLineCapRound;
    //终点处理
    path.lineJoinStyle = kCGLineJoinRound;
    
    //根据坐标点连线
    [path stroke];
    
}

ios UIBezierPath ios uibezierpath stroke_连线_06

 

5、二次贝塞尔曲线和三次贝塞尔曲线的绘制

曲线段在当前点开始,在指定的点结束;曲线的形状有开始点,结束点,一个或者多个控制点的切线定义。

下图显示了两种曲线类型的相似,以及控制点和curve形状的关系。

(1) 绘制二次贝塞尔曲线

方法:- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;

 

ios UIBezierPath ios uibezierpath stroke_贝塞尔曲线_07

1 - (void)drawRect:(CGRect)rect {
 2     
 3     //线条颜色
 4     UIColor *color = [UIColor orangeColor];
 5     [color set];
 6     
 7     //添加路径
 8     path = [UIBezierPath bezierPath];
 9             
10     path.lineWidth = 3;
11     //线条拐角
12     path.lineCapStyle = kCGLineCapRound;
13     //终点处理
14     path.lineJoinStyle = kCGLineJoinRound;
15                           
16     [path moveToPoint:(CGPoint){20,100}];
17     [path addQuadCurveToPoint:(CGPoint){100,100} controlPoint:(CGPoint){50,20}];
18     
19     //根据坐标点连线
20     [path stroke];
21     
22 }

ios UIBezierPath ios uibezierpath stroke_#import_08

 

(2) 绘制三次贝塞尔曲线

方法:- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;

 

ios UIBezierPath ios uibezierpath stroke_#import_09

1 - (void)drawRect:(CGRect)rect {
 2     
 3     //线条颜色
 4     UIColor *color = [UIColor orangeColor];
 5     [color set];
 6     
 7     //添加路径
 8     path = [UIBezierPath bezierPath];
 9             
10     path.lineWidth = 3;
11     //线条拐角
12     path.lineCapStyle = kCGLineCapRound;
13     //终点处理
14     path.lineJoinStyle = kCGLineJoinRound;
15                           
16     [path moveToPoint:(CGPoint){20,100}];
17     [path addCurveToPoint:(CGPoint){150,70} controlPoint1:(CGPoint){70,30} controlPoint2:(CGPoint){80,120}];
18     
19     //根据坐标点连线
20     [path stroke];
21     
22 }

ios UIBezierPath ios uibezierpath stroke_#import_10