ios基础篇(二十)—— UIBezierPath绘制

时间:2021-06-28 04:47:38

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

一、UIBezierPath使用:

1、创建path;

2、添加路径到path;

3、将path绘制出来;

 //创建path
path = [UIBezierPath bezierPath];
//添加路径
[path moveToPoint:(CGPoint){,}];
[path addLineToPoint:(CGPoint){,}];
//将path绘制出来
[path stroke];

二、实例

1、绘制多边形

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

 #import "Draw.h"

 @interface Draw (){

 UIBezierPath *path;

 }

 @end

 - (void)drawRect:(CGRect)rect {

     //线条颜色
UIColor *color = [UIColor orangeColor];
[color set]; //创建path
path = [UIBezierPath bezierPath];
//设置线宽
path.lineWidth = ;
//线条拐角
path.lineCapStyle = kCGLineCapRound;
//终点处理
path.lineJoinStyle = kCGLineJoinRound; [path moveToPoint:(CGPoint){,}];
[path addLineToPoint:(CGPoint){,}];
[path addLineToPoint:(CGPoint){,}];
[path addLineToPoint:(CGPoint){,}];
[path addLineToPoint:(CGPoint){,}];
[path addLineToPoint:(CGPoint){,}];
[path closePath];
//根据坐标点连线 [path stroke]; }

ios基础篇(二十)—— UIBezierPath绘制

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

下面来看看区别,

ios基础篇(二十)—— UIBezierPath绘制

2、绘制矩形

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

 - (void)drawRect:(CGRect)rect {

     //线条颜色
UIColor *color = [UIColor orangeColor];
[color set]; //创建path
//rect四个值分别为(x、y、矩形长,矩形宽)
path = [UIBezierPath bezierPathWithRect:(CGRect){,,,}];
//设置线宽
path.lineWidth = ;
//线条拐角
path.lineCapStyle = kCGLineCapRound;
//终点处理
path.lineJoinStyle = kCGLineJoinRound; //根据坐标点连线
[path stroke]; }

ios基础篇(二十)—— UIBezierPath绘制

3、绘制圆形或椭圆形

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

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

这个方法根据传入的rect矩形参数绘制一个内切曲线。
当传入的rect是一个正方形时,绘制的图像是一个内切圆;当传入的rect是一个长方形时,绘制的图像是一个内切椭圆。
 - (void)drawRect:(CGRect)rect {

     //线条颜色
UIColor *color = [UIColor orangeColor];
[color set]; //添加路径
path = [UIBezierPath bezierPathWithOvalInRect:(CGRect){,,,}];
path.lineWidth = ;
//线条拐角
path.lineCapStyle = kCGLineCapRound;
//终点处理
path.lineJoinStyle = kCGLineJoinRound;
//根据坐标点连线
[path stroke]; }

ios基础篇(二十)—— UIBezierPath绘制

下面改变rect值,

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

ios基础篇(二十)—— UIBezierPath绘制

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){,}
radius:
startAngle:
endAngle:PI*0.5
clockwise:YES
];
path.lineWidth = ;
//线条拐角
path.lineCapStyle = kCGLineCapRound;
//终点处理
path.lineJoinStyle = kCGLineJoinRound; //根据坐标点连线
[path stroke]; }

ios基础篇(二十)—— UIBezierPath绘制

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

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

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

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

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

ios基础篇(二十)—— UIBezierPath绘制

 - (void)drawRect:(CGRect)rect {

     //线条颜色
UIColor *color = [UIColor orangeColor];
[color set]; //添加路径
path = [UIBezierPath bezierPath]; path.lineWidth = ;
//线条拐角
path.lineCapStyle = kCGLineCapRound;
//终点处理
path.lineJoinStyle = kCGLineJoinRound; [path moveToPoint:(CGPoint){,}];
[path addQuadCurveToPoint:(CGPoint){,} controlPoint:(CGPoint){,}]; //根据坐标点连线
[path stroke]; }

ios基础篇(二十)—— UIBezierPath绘制

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

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

ios基础篇(二十)—— UIBezierPath绘制

 - (void)drawRect:(CGRect)rect {

     //线条颜色
UIColor *color = [UIColor orangeColor];
[color set]; //添加路径
path = [UIBezierPath bezierPath]; path.lineWidth = ;
//线条拐角
path.lineCapStyle = kCGLineCapRound;
//终点处理
path.lineJoinStyle = kCGLineJoinRound; [path moveToPoint:(CGPoint){,}];
[path addCurveToPoint:(CGPoint){,} controlPoint1:(CGPoint){,} controlPoint2:(CGPoint){,}]; //根据坐标点连线
[path stroke]; }

ios基础篇(二十)—— UIBezierPath绘制