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 }
如果修改最后一句代码将[path stroke]改成[path fill];
下面来看看区别,
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 }
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 }
下面改变rect值,
path = [UIBezierPath bezierPathWithOvalInRect:(CGRect){50,50,100,50}];
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];
}
5、二次贝塞尔曲线和三次贝塞尔曲线的绘制
曲线段在当前点开始,在指定的点结束;曲线的形状有开始点,结束点,一个或者多个控制点的切线定义。
下图显示了两种曲线类型的相似,以及控制点和curve形状的关系。
(1) 绘制二次贝塞尔曲线
方法:- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
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 }
(2) 绘制三次贝塞尔曲线
方法:- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
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 }