一、UIBezierPath基本概念:
UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的,都用直线和曲线段去创建。我们使用直线段去创建矩形和多边形,使用曲线段去创建弧(arc),圆或者其他复杂的曲线形状。每一段都包括一个或者多个点,绘图命令定义如何去诠释这些点。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。
二、UIBezierPath常用方法的使用:
eg1: 绘制多边形
/**
创建和使用path对象步骤:
1. 重写View的drawRect方法
2. 创建UIBezierPath的对象
3. 使用方法moveToPoint: 设置初始点
4. 根据具体要求使用UIBezierPath类方法绘图(比如要画线、矩形、圆、弧?等)
5. 设置UIBezierPath对象相关属性 (比如lineWidth、lineJoinStyle、aPath.lineCapStyle、color)
6. 使用stroke 或者 fill方法结束绘图
*/
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath *polygonPath = [UIBezierPath bezierPath];
polygonPath.lineWidth = 10.0f;
polygonPath.lineJoinStyle = kCGLineJoinRound; //线与线连接点类型 -- 圆形
polygonPath.lineCapStyle = kCGLineCapRound; //线端点类型 -- 圆形
//Draw the lines
[polygonPath moveToPoint: CGPointMake(150, 200)]; //设置多边形的初始点
[polygonPath addLineToPoint: CGPointMake(250, 300)]; //连接初始点到当前点并增加 线
[polygonPath addLineToPoint: CGPointMake(250, 400)];
[polygonPath addLineToPoint: CGPointMake(50, 400)];
[polygonPath addLineToPoint: CGPointMake(50, 300)];
[polygonPath closePath]; //最后一条线通过调用closePath得到
[polygonPath stroke]; //用 stroke 得到的是不被填充的view,用 fill 得到的内部被填充的view
}
运行结果:
eg2:绘制一段弧线
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
/**
param ArcCenter 圆心
param radius 圆半径
param startAngle 起始角度
param endAngle 结束角度
param clockwise true: 顺时针旋转 false: 逆时针旋转
*/
UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:self.center radius:100 startAngle:0 endAngle:M_PI/4*3 clockwise: true];
circlePath.lineJoinStyle = kCGLineJoinRound; //线与线连接点类型 -- 圆形
circlePath.lineCapStyle = kCGLineCapRound;
circlePath.lineWidth = 5.0f;
[circlePath stroke];
return;
}
运行结果:
eg3:绘制二次贝塞尔曲线
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineJoinStyle = kCGLineJoinRound; //线与线连接点类型 -- 圆形
path.lineCapStyle = kCGLineCapRound;
path.lineWidth = 2.0f;
[path moveToPoint: CGPointMake(100, 300)]; //初始点A
/**
param QuadCurveToPoint 结束点B
param controlPoint 控制点
*/
[path addQuadCurveToPoint: CGPointMake(300, 200) controlPoint: CGPointMake(200, 50)];
[path stroke];
return;
}
运行结果:
eg4:绘制三次贝塞尔曲线
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineJoinStyle = kCGLineJoinRound; //线与线连接点类型 -- 圆形
path.lineCapStyle = kCGLineCapRound;
path.lineWidth = 2.0f;
[path moveToPoint: CGPointMake(100, 200)]; //初始点A
/**
param CurveToPoint 结束点B
param controlPoint1 控制点1
param controlPoint2 控制点2
*/
[path addCurveToPoint: CGPointMake(300, 200) controlPoint1: CGPointMake(200, 100) controlPoint2: CGPointMake(200, 300)];
[path stroke];
return;
}
运行结果:
三、贝塞尔曲线常用方法和属性:
+ (instancetype)bezierPath; //初始化贝塞尔曲线(无形状)
+ (instancetype)bezierPathWithRect:(CGRect)rect; //绘制矩形贝塞尔曲线
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect; //绘制椭圆(圆形)曲线
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // 绘制含有圆角的贝塞尔曲线(矩形或正方形)
+ (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; //绘制圆弧曲线
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath; //根据CGPathRef绘制贝塞尔曲线
- (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 NS_AVAILABLE_IOS(4_0); //添加圆弧 注:上一个点会以直线的形式连接到圆弧的起点
- (void)closePath; //闭合曲线
- (void)removeAllPoints; //去掉所有曲线点