[TOC]

UIBezierPath

UIBezierPath是Core Graphics框架中==CGPathRef==数据类型的封装。

使用UIBezierPath可以创建基于矢量的路径:点 线 曲线 弧 矩形 椭圆/圆。

API熟悉

@interface UIBezierPath : NSObject<NSCopying, NSCoding>

+ (instancetype)bezierPath;

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

+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

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

+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;


- (void)moveToPoint:(CGPoint)point;
- (void)addLineToPoint:(CGPoint)point;
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;

- (void)closePath;

- (void)removeAllPoints;

- (void)appendPath:(UIBezierPath *)bezierPath;
- (UIBezierPath *)bezierPathByReversingPath;
- (void)applyTransform:(CGAffineTransform)transform;

@property(nonatomic) CGPathRef CGPath;
@property(readonly,getter=isEmpty) BOOL empty;
@property(nonatomic,readonly) CGRect bounds;
@property(nonatomic,readonly) CGPoint currentPoint;
- (BOOL)containsPoint:(CGPoint)point;

// Drawing properties
@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;

- (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;

- (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
- (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;

- (void)addClip;

@end

使用UIBezierPath画图步骤:

  1. 创建一个UIBezierPath对象
  2. 调用-moveToPoint:设置初始线段的起点
  3. 添加线或者曲线去定义一个或者多个子路径
  4. 改变UIBezierPath对象跟绘图相关的属性。如,我们可以设置画笔的属性、填充样式等

坐标

画三角形:

// 画三角形
-(void)drawTrianglePath{

  UIBezierPath*path = [UIBezierPath bezierPath];

  [pathmoveToPoint:CGPointMake(20,20)];
  [pathaddLineToPoint:CGPointMake(self.frame.size.width-40,20)];
  [pathaddLineToPoint:CGPointMake(self.frame.size.width/2,self.frame.size.height-20)];

  // 最后的闭合线是可以通过调用closePath方法来自动生成的,也可以调用-addLineToPoint:方法来添加
  // [path addLineToPoint:CGPointMake(20, 20)];
  [pathclosePath];

  // 设置线宽
  path.lineWidth=1.5;

  // 设置填充颜色
  UIColor*fillColor = [UIColor greenColor];
  [fillColor set];

  [path fill];

  // 设置画笔颜色
  UIColor*strokeColor=[UIColor blueColor];
  [stroke Colorset];
  [path stroke];

}

画矩形

// 画矩形
-(void)drawRectPath{

  UIBezierPath*path=[UIBezierPath bezierPathWithRect:CGRectMake(20,20,self.frame.size.width-40,self.frame.size.height-40)];

  path.lineWidth=1.5;
  path.lineCapStyle=kCGLineCapRound;
  path.lineJoinStyle=kCGLineJoinBevel;

  // 设置填充颜色
  UIColor*fillColor=[UIColor greenColor];
  [fillColor set];

  [pathf ill];

  // 设置画笔颜色

  UIColor*strokeColor=[UIColor blueColor];
  [strokeColor set];

  // 根据我们设置的各个点连线
  [pathstroke];
}

  lineCapStyle属性是用来设置线条拐角帽的样式的,其中有三个选择:

  /* Line cap styles. */

  typedefCF_ENUM(int32_t,CGLineCap){

  kCGLineCapButt,

  kCGLineCapRound,

  kCGLineCapSquare

};

画带圆角的矩形

-(void)drawRoundedRectPath{

  UIBezierPath*path=[UIBezierPath bezierPathWithRoundedRect:CGRectMake(20,20,self.frame.size.width-40,self.frame.size.height-40) cornerRadius:10];

  // 设置填充颜色
  UIColor*fillColor=[UIColor greenColor];
  [fillColor set];

  [pathfill];

  // 设置画笔颜色

  UIColor*strokeColor=[UIColorblueColor];
  [strokeColorset];

  // 根据我们设置的各个点连线

  [pathstroke];
}


//指一个角是圆角:
UIBezierPath*path=[UIBezierPath bezierPathWithRoundedRect:CGRectMake(20,20,self.frame.size.width-40,self.frame.size.height-40)byRoundingCorners:UIRectCornerTopRightcornerRadii:CGSizeMake(20,20)];

画圆/椭圆

-(void)drawCiclePath{

  //传的是正方形,因此就可以绘制出圆了
  UIBezierPath*path=[UIBezierPath bezierPathWithOvalInRect:CGRectMake(20,20,self.frame.size.width-40,self.frame.size.width-40)];

  // 设置填充颜色
  UIColor*fillColor=[UIColor greenColor];
  [fillColor set];
  [pathfill];

  // 设置画笔颜色
  UIColor*strokeColor=[UIColor blueColor];
  [strokeColor set];
  [pathstroke];
}

画弧

画弧前,我们需要了解其坐标系:

img

#define   kDegreesToRadians(degrees)  ((pi * degrees)/ 180)

-(void)drawARCPath{

  constCGFloatpi=3.14159265359;
  CGPoint center=CGPointMake(self.frame.size.width/2,self.frame.size.height/2);

  UIBezierPath*path=[UIBezierPath bezierPathWithArcCenter:center radius:100 startAngle:0 endAngle:kDegreesToRadians(135) clockwise:YES];

  path.lineCapStyle=kCGLineCapRound;
  path.lineJoinStyle=kCGLineJoinRound;
  path.lineWidth=5.0;
  UIColor*strokeColor=[UIColorredColor];
  [strokeColorset];

  [pathstroke];
}

画二次贝塞尔曲线

v

-(void)drawSecondBezierPath{

  UIBezierPath*path=[UIBezierPath bezierPath];

  // 首先设置一个起始点
  [path moveToPoint:CGPointMake(20,self.frame.size.height-100)];

  // 添加二次曲线
  [path addQuadCurveToPoint:CGPointMake(self.frame.size.width-20,self.frame.size.height-100) controlPoint:CGPointMake(self.frame.size.width/2,0)];

  path.lineCapStyle=kCGLineCapRound;
  path.lineJoinStyle=kCGLineJoinRound;
  path.lineWidth=5.0;
  UIColor*strokeColor=[UIColor redColor];
  [strokeColorset];

  [path stroke];
}

画三次贝塞尔曲线

-(void)drawThirdBezierPath{

  UIBezierPath*path=[UIBezierPath bezierPath];

  // 设置起始端点
  [path moveToPoint:CGPointMake(20,150)];
  [path addCurveToPoint:CGPointMake(300,150) controlPoint1:CGPointMake(160,0) controlPoint2:CGPointMake(160,250)];

  path.lineCapStyle=kCGLineCapRound;
  path.lineJoinStyle=kCGLineJoinRound;
  path.lineWidth=5.0;
  UIColor*strokeColor=[UIColor redColor];
  [strokeColor set];
  [path stroke];
}

results matching ""

    No results matching ""