iOS开发UIBezierPath的详细介绍

来源:互联网 发布:开源预约上门o2o源码 编辑:程序博客网 时间:2024/05/20 04:46

使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit中.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状。

1.UIBezierPath基础

   UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的,都用直线和曲线段去创建。我们使用直线段去创建矩形和多边形,使用曲线段去创建弧(arc)、圆或者其他复杂的曲线形状。每一段都包括一个或者多个点,绘图命令定义如何去诠释这些点。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。

2.创建一个完整的UIBezierPath对象的完整步骤如下:

  • 创建一个UIBezierPath对象
  • 使用方法moveToPoint:去设置初始线段的起点
  • 添加line或者curve去定义一个或者多个subpath
  • 修改UIBezierPath对象跟绘图相关的属性

3.使用UIBezierPath创建直线或者多边形

使用下面这个方法:

- (void)addLineToPoint:(CGPoint)point;

(1).画一条直线代码如下:

- (void)drawRect:(CGRect)rect  {      UIColor *color = [UIColor redColor];      [color set]; //设置线条颜色            UIBezierPath *linePath = [UIBezierPath bezierPath]; // 初始化UIBezierPath    linePath.lineWidth = 5.0; // 设置线条宽度     linePath.lineCapStyle = kCGLineCapRound; //线条拐角      linePath.lineJoinStyle = kCGLineCapRound; //终点处理        [linePath moveToPoint:CGPointMake(10.0, 100.0)]; // 设置初始线段的起点     [linePath addLineToPoint:CGPointMake(self.frame.size.width-20.0, 100.0)]; // 开始画     [linePath stroke];// 根据坐标点连线  }  

(2).画三角形代码如下:

- (void)drawRect:(CGRect)rect  {      UIColor *color = [UIColor redColor];      [color set]; //设置线条颜色      CGFloat viewCenterX = self.center.x; // 屏幕的中心X轴    UIBezierPath *linePath = [UIBezierPath bezierPath]; // 初始化UIBezierPath    linePath.lineWidth = 5.0; // 设置线条宽度     linePath.lineCapStyle = kCGLineCapRound; //线条拐角      linePath.lineJoinStyle = kCGLineCapRound; //终点处理        [linePath moveToPoint:CGPointMake(viewCenterX, 100.0)]; // 设置初始线段的起点     [linePath addLineToPoint:CGPointMake(viewCenterX+40.0, 150.0)]; // 开始画     [linePath addLineToPoint:CGPointMake(viewCenterX-40.0, 150.0)];     [linePath closePath]; // 最后一根线通过调用closePath方法得到的      [linePath stroke];// 根据坐标点连线  }  

如果修改最后一句代码为:[linePath fill];

运行结果就如下:

4.使用UIBezierPath创建虚线

使用下面这个方法:

- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;

画虚线代码如下:

- (void)drawRect:(CGRect)rect  {      UIColor *color = [UIColor redColor];      [color set]; //设置线条颜色      UIBezierPath *dottedLinePath = [UIBezierPath bezierPath]; // 初始化UIBezierPath    dottedLinePath.lineWidth = 5.0; // 设置线条宽度     dottedLinePath.lineCapStyle = kCGLineCapRound; //线条拐角      dottedLinePath.lineJoinStyle = kCGLineCapRound; //终点处理        [dottedLinePath moveToPoint:CGPointMake(10.0, 100.0)]; // 设置初始线段的起点     [dottedLinePath addLineToPoint:CGPointMake(self.frame.size.width-20.0, 100.0)]; // 开始画     CGFloat dash[] = {3, 1}; // 3实线,1空白    [dottedLinePath setLineDash:dash count:1 phase:1];      [dottedLinePath stroke];// 根据坐标点连线  }  

5.使用UIBezierPath创建矩形或者正方形

使用下面这个方法:

+ (instancetype)bezierPathWithRect:(CGRect)rect;

或者使用下面这个方法:

- (void)addLineToPoint:(CGPoint)point;

(1).第一种画矩形代码如下:

- (void)drawRect:(CGRect)rect  {      UIColor *color = [UIColor redColor];      [color set]; //设置线条颜色      UIBezierPath *rectanglePath = [UIBezierPath bezierPath]; // 初始化UIBezierPath    rectanglePath.lineWidth = 5.0; // 设置线条宽度     rectanglePath.lineCapStyle = kCGLineCapRound; //线条拐角      rectanglePath.lineJoinStyle = kCGLineCapRound; //终点处理        [rectanglePath moveToPoint:CGPointMake(10.0, 100.0)]; // 设置初始线段的起点     [rectanglePath addLineToPoint:CGPointMake(self.frame.size.width-20.0, 100.0)]; // 开始画    [rectanglePath addLineToPoint:CGPointMake(self.frame.size.width-20.0, 200.0)];    [rectanglePath addLineToPoint:CGPointMake(10.0, 200.0)];    [rectanglePath closePath];       [rectanglePath stroke];// 根据坐标点连线  }  

(2).第二种画矩形代码如下:

- (void)drawRect:(CGRect)rect  {      UIColor *color = [UIColor redColor];      [color set]; //设置线条颜色      UIBezierPath *rectanglePath = [UIBezierPath bezierPath]; // 初始化UIBezierPath    rectanglePath.lineWidth = 5.0; // 设置线条宽度     rectanglePath.lineCapStyle = kCGLineCapRound; //线条拐角      rectanglePath.lineJoinStyle = kCGLineCapRound; //终点处理        [rectanglePath moveToPoint:CGPointMake(10.0, 100.0)]; // 设置初始线段的起点     [rectanglePath addLineToPoint:CGPointMake(self.frame.size.width-20.0, 100.0)]; // 开始画    [rectanglePath addLineToPoint:CGPointMake(self.frame.size.width-20.0, 200.0)];    [rectanglePath addLineToPoint:CGPointMake(10.0, 200.0)];    [rectanglePath closePath];       [rectanglePath stroke];// 根据坐标点连线  }  

6.使用UIBezierPath创建圆形或者椭圆形

使用下面这个方法:

+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

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

7.使用UIBezierPath创建弧线

使用下面这个方法:

+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;

参数说明:

  • center:这段弧线的中心
  • radius:这段弧线的半径
  • startAngle:这段弧线的开始角度
  • endAngle:这段弧线的结束角度
  • clockwise:是否顺时针方向(YES:顺时针;NO:逆时针)

9.使用UIBezierPath创建二次贝塞尔曲线和三次贝塞尔曲线

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

使用下面这个方法:

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

参数说明:

  • endPoint:这段弧线的结束位置
  • controlPoint:这段弧线的控制位置

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

使用下面这个方法:

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

参数说明:

  • endPoint:这段弧线的结束位置
  • controlPoint1:这段弧线的第一个控制位置
  • controlPoint2:这段弧线的第二个控制位置

10.使用UIBezierPath创建圆角

使用下面这个方法:

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;

下面这个方法是创建每个角的圆角:

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;

11.UIBezierPath方法说明

// 用于创建一个基础路径+ (instancetype)bezierPath;// 用于画矩阵+ (instancetype)bezierPathWithRect:(CGRect)rect;// 当rect是一个正方形时,绘制的图像是一个内切圆;当rect是一个长方形时,绘制的图像是一个内切椭圆+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;// 用于在矩形里面画出一个椭圆+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;// 可以指定画圆角,可以一个View添加圆角+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;// 根据一个点画出一条弧线/圆+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;// 根据一个Core Graphics路径创建一个新的路径+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;// 设置初始线段的起点- (void)moveToPoint:(CGPoint)point;// 从一个点添加一条线到point点- (void)addLineToPoint:(CGPoint)point;// 从一个点添加曲线到另一个点endPoint,曲线的弯度控制点有两个controlPoint1和controlPoint2。- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;// 从一个点添加曲线到另一个点endPoint,曲线的弯度控制点controlPoint- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;// 根据一个点画出一条弧线/圆- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);// 合拢当前路径的起始点和终止点- (void)closePath;// 移除path路径瞄下的所有路径,当然必须要在[path fill];或者是[path stroke];语句之前才有效果- (void)removeAllPoints;// 路径之间的拼接,拼接之后只需要调用拼接路径的路径执行fill/stroke即可,但是fill和closePath是独立的不会互相影响- (void)appendPath:(UIBezierPath *)bezierPath;// 反向绘制path- (UIBezierPath *)bezierPathByReversingPath ;- (void)applyTransform:(CGAffineTransform)transform;@property(readonly,getter=isEmpty) BOOL empty;// 判断路径是否为空@property(nonatomic,readonly) CGRect bounds;// 获取当前路劲的画板CGRect@property(nonatomic,readonly) CGPoint currentPoint;// 获取当前路径下的画笔的点- (BOOL)containsPoint:(CGPoint)point;// 判断路劲里面是否包含某个点,需要是重要点才为true,fill形成的点不算@property(nonatomic) CGFloat lineWidth;// 线的宽度@property(nonatomic) CGLineCap lineCapStyle;// 线的类型@property(nonatomic) CGLineJoin lineJoinStyle;// 线尾部头部的类型@property(nonatomic) CGFloat miterLimit; // Used when lineJoinStyle is kCGLineJoinMiter@property(nonatomic) CGFloat flatness;@property(nonatomic) BOOL usesEvenOddFillRule; // Default is NO. When YES, the even-odd fill rule is used for drawing, clipping, and hit testing.// 用于画虚线- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;- (void)getLineDash:(nullable CGFloat *)pattern count:(nullable NSInteger *)count phase:(nullable CGFloat *)phase;- (void)fill;//填充颜色- (void)stroke;//功能包括fill,并且会自动关闭上下文// These methods do not affect the blend mode or alpha of the current graphics context- (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;- (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;- (void)addClip;//添加裁剪,会将路径之外的图案切除,但是必须在路径执行fill/stroke方法之前才有效

原创粉丝点击