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

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

一、UIBezierPath使用：

1、创建path；

2、添加路径到path；

3、将path绘制出来；

1 //创建path2     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 @end10 11 - (void)drawRect:(CGRect)rect {12     13     //线条颜色14     UIColor *color = [UIColor orangeColor];15     [color set];16     17     //创建path18     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 }