UIBezierPath(CAShapeLayer与CoreGraphics)实现

贝塞尔曲线就算没用过的也听过说，贝塞尔在各种图形应用中的应用的非常广泛，最开始贝塞尔先生为了汽车图形进行设计，由其他算法改进而来，计算公式和推导过程相当复杂，有兴趣的可以看一下，数学功底不够的基本看不懂(包括我)。但是这并不妨碍我们在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

最后编辑于：2019.04.21 12:30:13

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,590评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 86,808评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,151评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,779评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,773评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,656评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,022评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,678评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,038评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,659评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,756评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,411评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,005评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,973评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,053评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,495评论 2赞 343

UIBezierPath(CAShapeLayer与CoreGraphics)实现

CAShapeLayer

参考资料

推荐阅读更多精彩内容