[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画图步骤:
- 创建一个UIBezierPath对象
- 调用-moveToPoint:设置初始线段的起点
- 添加线或者曲线去定义一个或者多个子路径
- 改变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];
}
画弧
画弧前,我们需要了解其坐标系:
#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];
}