贝塞尔曲线就算没用过的也听过说，贝塞尔在各种图形应用中的应用的非常广泛，最开始贝塞尔先生为了汽车图形进行设计，由其他算法改进而来，计算公式和推导过程相当复杂，有兴趣的可以看一下，数学功底不够的基本看不懂(包括我)。但是这并不妨碍我们在iOS开发使用贝塞尔曲线进行图形绘制和动画的时候需要曲线运动，通常是和CAShapeLayer和drawRect中实现:
CAShapeLayer属于CoreAnimation框架，通过GPU来渲染图形，不消耗内存，节省性能;
drawRect属于CoreGraphics框架，占用CPU，性能消耗大，如果没有需求，苹果不建议实现空的drawRect方法;
CAShapeLayer
CSShapeLayer-FlyElephant.gif
图中展示的图形都是UIBezierPath设置CAShapeLayer配合显示:
矩形代码:
CGRect tangleRect=CGRectMake(20, 60, 40, 40);
CAShapeLayer *tangleLayer=[CAShapeLayer layer];
tangleLayer.frame=tangleRect;
[self setShapeLayer:tangleLayer];
UIBezierPath *tanglePath=[UIBezierPath bezierPathWithRect:tangleRect];
tangleLayer.path=tanglePath.CGPath;
[self.view.layer addSublayer:tangleLayer];
内切圆
//内切圆 FlyElephant
CGRect circleFrame=CGRectMake(80, 60, 40, 40);
CAShapeLayer *circleLayer=[CAShapeLayer layer];
circleLayer.frame=circleFrame;
[self setShapeLayer:circleLayer];
UIBezierPath *bezierPath=[UIBezierPath bezierPathWithOvalInRect:circleFrame];
circleLayer.path=bezierPath.CGPath;
[self.view.layer addSublayer:circleLayer];
圆角矩形
//圆角矩形 FlyElephant
CGRect roundRect=CGRectMake(150, 60, 40, 40);
CAShapeLayer *roundLayer=[CAShapeLayer layer];
roundLayer.frame=roundRect;
[self setShapeLayer:roundLayer];
UIBezierPath *roundPath=[UIBezierPath bezierPathWithRoundedRect:roundRect cornerRadius:5];
roundLayer.path=roundPath.CGPath;
[self.view.layer addSublayer:roundLayer];
弧形
//弧形 FlyElephant
CGRect arcRect=CGRectMake(20, 100, 60, 60);
CAShapeLayer *curveLayer=[CAShapeLayer layer];
curveLayer.frame=arcRect;
[self setShapeLayer:curveLayer];
UIBezierPath *arcPath=[UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 130) radius:30 startAngle:M_PI_2 endAngle:M_PI clockwise:YES];
curveLayer.path=arcPath.CGPath;
[self.view.layer addSublayer:curveLayer];
这四个图形涵盖了UIBezierPath的基本方法:
+ (instancetype)bezierPathWithRect:(CGRect)rect;
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // rounds all corners with the same horizontal and vertical radius
+ (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;
图中的三角形，二阶贝塞尔曲线和三阶贝塞尔曲线需要单独设置:
三角形:
//三角形 FlyElephant
CGRect triangleRect=CGRectMake(120, 200, 100, 100);
CAShapeLayer *triangleLayer=[CAShapeLayer layer];
triangleLayer.frame=triangleRect;
[self setShapeLayer:triangleLayer];
UIBezierPath *trianglePath=[UIBezierPath bezierPath];
[trianglePath moveToPoint:CGPointMake(50, 0)];
[trianglePath addLineToPoint:CGPointMake(0, 100)];
[trianglePath addLineToPoint:CGPointMake(100, 100)];
[trianglePath addLineToPoint:CGPointMake(50, 0)];
triangleLayer.path=trianglePath.CGPath;
[self.view.layer addSublayer:triangleLayer];
二阶贝塞尔曲线:
//二阶贝塞尔曲线 FlyElephant
CGRect quandRect=CGRectMake(240, 200, 100, 100);
CAShapeLayer *quandLayer=[CAShapeLayer layer];
quandLayer.frame=quandRect;
[self setShapeLayer:quandLayer];
UIBezierPath *quandPath=[UIBezierPath bezierPath];
[quandPath moveToPoint:CGPointMake(0, 100)];
[quandPath addQuadCurveToPoint:CGPointMake(100, 100) controlPoint:CGPointMake(60, 0)];
quandLayer.path=quandPath.CGPath;
[self.view.layer addSublayer:quandLayer];
三阶贝塞尔曲线:
//三阶贝塞尔曲线 FlyElephant
CGRect curveRect=CGRectMake(20, 200, 200, 200);
CAShapeLayer *curveLayer=[CAShapeLayer layer];
curveLayer.frame=curveRect;
[self setShapeLayer:curveLayer];
UIBezierPath *curvePath=[UIBezierPath bezierPath];
//贝塞尔控制点生成 http://www.j--d.com/bezier
[curvePath moveToPoint:CGPointMake(9, 198)];
[curvePath addCurveToPoint:CGPointMake(199,104) controlPoint1:CGPointMake(71, 91) controlPoint2:CGPointMake(109,197)];
curveLayer.path=curvePath.CGPath;
[self.view.layer addSublayer:curveLayer];
其中关于三阶贝塞尔曲线的控制点，给了一个网站，可以作为一个参考，文中最后又对应的控制点的算法，如果有能力的可以自行研究~
贝塞尔曲线绘制时可以通过srokeStart和strokeEnd确定曲线的长短，最后的动画效果实现代码:
self.strokeLayer=[CAShapeLayer layer];
CGRect circleFrame=CGRectMake(20, 200, 120, 120);
self.strokeLayer.frame=circleFrame;
[self setShapeLayer:self.strokeLayer];
UIBezierPath *bezierPath=[UIBezierPath bezierPathWithOvalInRect:circleFrame];
self.strokeLayer.path=bezierPath.CGPath;
[self.view.layer addSublayer:self.strokeLayer];
self.strokeLayer.strokeStart =0;
self.strokeLayer.strokeEnd =0;
NSTimer负责实时刷新:
self.timer = [NSTimer scheduledTimerWithTimeInterval:0.1
target:self
selector:@selector(updateStroke)
userInfo:nil
repeats:YES];
刷新方法:
NSNumber *startNumber=[NSNumber numberWithFloat:self.strokeLayer.strokeStart];
CGFloat startValue=[startNumber floatValue];
NSNumber *endNumber=[NSNumber numberWithFloat:self.strokeLayer.strokeEnd];
CGFloat endValue=[endNumber floatValue];
if (startValue==0&&endValue<1) {
self.strokeLayer.strokeEnd+=0.1;
}
if (endValue==1&&startValue<1) {
self.strokeLayer.strokeStart+=0.1;
}
if (startValue>0&&startValue==endValue) {
self.strokeLayer.strokeStart=0;
self.strokeLayer.strokeEnd=0;
}
自定义View的drawRect
DrawRect-FlyElephant.png
方法都封装在自定义View中，调用比较简单:
BezierPathView *view=[[BezierPathView alloc]initWithFrame:CGRectMake(20, 80, 40,40) type:BezierPathRect];
[self.view addSubview:view];
BezierPathView *circleView=[[BezierPathView alloc]initWithFrame:CGRectMake(100, 80, 50,50) type:BezierPathCircle];
[self.view addSubview:circleView];
BezierPathView *roundView=[[BezierPathView alloc]initWithFrame:CGRectMake(200, 80, 40,40) type:BezierPathRound];
[self.view addSubview:roundView];
BezierPathView *arcView=[[BezierPathView alloc]initWithFrame:CGRectMake(20, 180, 60,60) type:BezierPathSrc];
[self.view addSubview:arcView];
BezierPathView *triangleView=[[BezierPathView alloc]initWithFrame:CGRectMake(100, 180, 100,100) type:BezierPathTriangle];
[self.view addSubview:triangleView];
//FlyElephant
BezierPathView *quandView=[[BezierPathView alloc]initWithFrame:CGRectMake(240, 180, 100,100) type:BezierPathQuand];
[self.view addSubview:quandView];
BezierPathView *curveView=[[BezierPathView alloc]initWithFrame:CGRectMake(20, 300, 200,200) type:BezierPathCurve];
[self.view addSubview:curveView];
BezierPathType类型:
typedef NS_ENUM(NSInteger,BezierPathType){
BezierPathRect,
BezierPathCircle,
BezierPathRound,
BezierPathSrc,
BezierPathTriangle,
BezierPathQuand,
BezierPathCurve
};
@interface BezierPathView : UIView
-(instancetype)initWithFrame:(CGRect)frame type:(BezierPathType)type;
@end
BezierPathView实现:
//
// BezierPathView.m
// FEAnimations
//
// Created by FlyElephant on 16/4/11.
// Copyright © 2016年 FlyElephant. All rights reserved.
//
#import "BezierPathView.h"
@interface BezierPathView()
@property (assign,nonatomic) BezierPathType type;
@end
@implementation BezierPathView
-(instancetype)initWithFrame:(CGRect)frame type:(BezierPathType)type{
self=[super initWithFrame:frame];
if (self) {
self.type=type;
self.backgroundColor=[UIColor clearColor];
self.clipsToBounds=YES;
}
return self;
}
-(void)drawRect:(CGRect)rect{
UIBezierPath *path ;
switch (self.type) {
case BezierPathRect:
path = [UIBezierPath bezierPathWithRect:self.bounds];
break;
case BezierPathCircle:
path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(5, 5, 40, 40)];
break;
case BezierPathRound:
path = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:5];
break;
case BezierPathSrc:
path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(self.frame.size.width,self.frame.size.height/2)];
[path addArcWithCenter:CGPointMake(self.frame.size.width/2, self.frame.size.height/2) radius:self.frame.size.width/2-2 startAngle:0 endAngle:M_PI clockwise:YES];
break;
case BezierPathTriangle:
path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(self.frame.size.width/2,0)];
[path addLineToPoint:CGPointMake(0, self.frame.size.height)];
[path addLineToPoint:CGPointMake(self.frame.size.width, self.frame.size.height)];
[path addLineToPoint:CGPointMake(self.frame.size.width/2, 0)];
break;
case BezierPathQuand:
path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0,self.frame.size.height)];
[path addQuadCurveToPoint:CGPointMake(self.frame.size.width, self.frame.size.height) controlPoint:CGPointMake(self.frame.size.width/2+10, 0)];
break;
case BezierPathCurve:
path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0,self.frame.size.height)];
[path addCurveToPoint:CGPointMake(self.frame.size.width, 0) controlPoint1:CGPointMake(39, 25) controlPoint2:CGPointMake(174, 199)];
break;
default:
break;
}
path.lineWidth = 1;
UIColor *fillColor = [UIColor clearColor];
[fillColor set];
[path fill];
UIColor *strokeColor = [UIColor redColor];
[strokeColor set];
[path stroke];
}
-(void)drawRect{
UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.bounds];
path.lineWidth = 1;
UIColor *fillColor = [UIColor whiteColor];
[fillColor set];
[path fill];
UIColor *strokeColor = [UIColor redColor];
[strokeColor set];
[path stroke];
}
-(void)drawCircle{
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.bounds];
path.lineWidth = 1;
UIColor *fillColor = [UIColor whiteColor];
[fillColor set];
[path fill];
UIColor *strokeColor = [UIColor redColor];
[strokeColor set];
[path stroke];
}
@end
Swift 矩形绘制
override func draw(_ rect: CGRect) {
super.draw(rect)
guard UIGraphicsGetCurrentContext() != nil else {
return
}
let context = UIGraphicsGetCurrentContext()!
let path = CGMutablePath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 200, y: 0))
path.addLine(to: CGPoint(x: 200, y: 50))
path.addLine(to: CGPoint(x: 0, y: 50))
path.addLine(to: CGPoint(x: 0, y: 0))
// context.addPath(path)
//context.setStrokeColor(UIColor.red.cgColor)
context.setLineWidth(10)
context.strokePath()
// context.setFillColor(UIColor.red.cgColor)
// context.fillPath()
}
参考资料
贝塞尔控制点算法-FlyElephant
贝塞尔控制点-FlyElephant