UIBezierPath(CAShapeLayer与CoreGr

2016-04-12 本文已影响722人 FlyElephant

贝塞尔曲线就算没用过的也听过说，贝塞尔在各种图形应用中的应用的非常广泛，最开始贝塞尔先生为了汽车图形进行设计，由其他算法改进而来，计算公式和推导过程相当复杂，有兴趣的可以看一下，数学功底不够的基本看不懂(包括我).但是这并不妨碍我们在iOS开发使用贝塞尔曲线进行图形绘制和动画的时候需要曲线运动，通常是和CAShapeLayer和drawRect中实现:
CAShapeLayer属于CoreAnimation框架，通过GPU来渲染图形，不消耗内存，节省性能;
drawRect属于CoreGraphics框架，占用CPU，性能消耗大，如果没有需求，苹果不建议实现空的drawRect方法;

CAShapeLayer

CSShapeLayer-FlyElephant.gif

图中展示的图形都是UIBezierPath设置CAS,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的基本方法:
<pre><code>`

(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;`
</code></pre>

图中的三角形，二阶贝塞尔曲线和三阶贝塞尔曲线需要单独设置:
三角形:

//三角形  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类型:
<pre><code>`
typedef NS_ENUM(NSInteger,BezierPathType){
BezierPathRect,
BezierPathCircle,
BezierPathRound,
BezierPathSrc,
BezierPathTriangle,
BezierPathQuand,
BezierPathCurve
};

@interface BezierPathView : UIView

-(instancetype)initWithFrame:(CGRect)frame type:(BezierPathType)type;

@end`</code></pre>

BezierPathView实现:
<pre><code>`

//
// 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`</code></pre>

Swift 矩形绘制
<pre><code>` 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()
    
}`</code></pre>

参考资料

贝塞尔控制点算法-FlyElephant
贝塞尔控制点-FlyElephant

UIBezierPath(CAShapeLayer与CoreGr

CAShapeLayer

import "BezierPathView.h"

参考资料

猜你喜欢

热点阅读