iOS开发之贝塞尔曲线绘制图形

时间:2022-11-29 05:47:48

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

一、UIBezierPath使用:

1、创建path;

2、添加路径到path;

3、将path绘制出来;

iOS开发之贝塞尔曲线绘制图形
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
iOS开发之贝塞尔曲线绘制图形

二、实例

1、绘制多边形

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

iOS开发之贝塞尔曲线绘制图形
 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开发之贝塞尔曲线绘制图形

iOS开发之贝塞尔曲线绘制图形

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

下面来看看区别,

iOS开发之贝塞尔曲线绘制图形

2、绘制矩形

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

iOS开发之贝塞尔曲线绘制图形
 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开发之贝塞尔曲线绘制图形

iOS开发之贝塞尔曲线绘制图形

 

3、绘制圆形或椭圆形

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

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

这个方法根据传入的rect矩形参数绘制一个内切曲线。 当传入的rect是一个正方形时,绘制的图像是一个内切圆;当传入的rect是一个长方形时,绘制的图像是一个内切椭圆。 iOS开发之贝塞尔曲线绘制图形
 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开发之贝塞尔曲线绘制图形

iOS开发之贝塞尔曲线绘制图形

下面改变rect值,

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

iOS开发之贝塞尔曲线绘制图形

 

4、绘制弧线

绘制弧线用方法:

+ (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center

                   radius:(CGFloat)radius

                 startAngle:(CGFloat)startAngle

                  endAngle:(CGFloat)endAngle

                  clockwise:(BOOL)clockwise;

 其中 Center:圆弧的中心;

    radius:半径;

  startAngle:开始角度;

   endAngle:结束角度;

   clockwise:是否顺时针方向;

iOS开发之贝塞尔曲线绘制图形
#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开发之贝塞尔曲线绘制图形

iOS开发之贝塞尔曲线绘制图形

 

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

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

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

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

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

 iOS开发之贝塞尔曲线绘制图形

iOS开发之贝塞尔曲线绘制图形
 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开发之贝塞尔曲线绘制图形

iOS开发之贝塞尔曲线绘制图形

 

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

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

 iOS开发之贝塞尔曲线绘制图形

iOS开发之贝塞尔曲线绘制图形
 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开发之贝塞尔曲线绘制图形

iOS开发之贝塞尔曲线绘制图形