ios-贝塞尔曲线

git下载地址:[email protected]:lu459700780/UIBezierPath.git

演示：

#import "ViewController.h"
@interface ViewController ()

@property (nonatomic,assign)BOOL Plus_Minus;
@property (nonatomic,strong)CAShapeLayer * shapeLayer;
@property (nonatomic,strong)UIBezierPath * trackPath;
@property (nonatomic,strong)CAShapeLayer * trackLayer;
@property (nonatomic,strong)UIBezierPath * progressPath;
@property (nonatomic,strong)CAShapeLayer * progressLayer;
@property (nonatomic,strong)NSTimer * timer;
@property (nonatomic,strong)CAShapeLayer * shapeLayerT;
@property (nonatomic,strong)CAShapeLayer * shapeLayerTM;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    _Plus_Minus = YES;

    //创建CAShapeLayer
    self.shapeLayer = [CAShapeLayer layer];
    self.shapeLayer.frame = CGRectMake(100, 100, 50, 50);
//    self.shapeLayer.position = self.view.center;
    self.shapeLayer.fillColor = [UIColor cyanColor].CGColor;//填充颜色为ClearColor

    //设置线条的宽度和颜色
    self.shapeLayer.lineWidth = 1.0f;
    self.shapeLayer.strokeColor = [UIColor redColor].CGColor;

    //创建出圆形贝塞尔曲线
    UIBezierPath * circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 50, 50)];

    //让贝塞尔曲线与CAShapeLayer 产生联系
    self.shapeLayer.path = circlePath.CGPath;

    //一、添加并显示 画一个圆形
//    [self.view.layer addSublayer:self.shapeLayer];

    /*
     Stroke:用笔画的意思
     在这里就是起始笔和结束笔的位置
     Stroke为1的话就是一整圈，0.5就是半圈，0.25就是1/4圈。以此类推
     */
    self.shapeLayer.strokeStart = 0;
    self.shapeLayer.strokeEnd = 0.75;

    //二、画两个圆，其中一个圆表示进度
    [self createBezierPath:CGRectMake(100, 200, 100, 100)];

    //三、创建转动的圆
    [self circleBezierPath];
    //四、通过点画线组成一个五边线
    [self fiveAnimation];
    //五、画一条虚线
    [self createDottedLine];
    //六、画一个弧线
    [self createCurvedLine];
}

-(void)createCurvedLine{

    UIBezierPath* aPath = [UIBezierPath bezierPath];
    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理
    [aPath moveToPoint:CGPointMake(20, 100)];
    [aPath addQuadCurveToPoint:CGPointMake(120, 100) controlPoint:CGPointMake(70, 0)];

    CAShapeLayer * CurvedLineLayer=[CAShapeLayer layer];
    CurvedLineLayer.path=aPath.CGPath;
    [self.view.layer addSublayer:CurvedLineLayer];

}

-(void)createDottedLine{

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    [shapeLayer setBounds:self.view.bounds];
    [shapeLayer setPosition:self.view.center];
    [shapeLayer setFillColor:[[UIColor clearColor] CGColor]];

    // 设置虚线颜色为blackColor
    [shapeLayer setStrokeColor:[[UIColor colorWithRed:223/255.0 green:223/255.0 blue:223/255.0 alpha:1.0f] CGColor]];

    // 3.0f设置虚线的宽度
    [shapeLayer setLineWidth:1.0f];
    [shapeLayer setLineJoin:kCALineJoinRound];

    // 3=线的宽度 1=每条线的间距
    [shapeLayer setLineDashPattern:
     [NSArray arrayWithObjects:[NSNumber numberWithInt:3],
      [NSNumber numberWithInt:1],nil]];

    // Setup the path
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, 0, 89);
    CGPathAddLineToPoint(path, NULL, 320,89);

    [shapeLayer setPath:path];
    CGPathRelease(path);

    // 可以把self改成任何你想要的UIView, 下图演示就是放到UITableViewCell中的
    [[self.view layer] addSublayer:shapeLayer];

}

//五角形
-(void)fiveAnimation{

    UIBezierPath *aPath = [UIBezierPath bezierPath];
    //开始点 从上左下右的点
    [aPath moveToPoint:CGPointMake(100,100)];
    //划线点
    [aPath addLineToPoint:CGPointMake(60, 140)];
    [aPath addLineToPoint:CGPointMake(60, 240)];
    [aPath addLineToPoint:CGPointMake(160, 240)];
    [aPath addLineToPoint:CGPointMake(160, 140)];
    [aPath closePath];
    //设置定点是个5*5的小圆形（自己加的）
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100-5/2.0, 50, 20, 20)];
    [aPath appendPath:path];

    CAShapeLayer *shapelayer = [CAShapeLayer layer];
    //设置边框颜色
    shapelayer.strokeColor = [[UIColor redColor]CGColor];
    //设置填充颜色 如果只要边 可以把里面设置成[UIColor ClearColor]
    shapelayer.fillColor = [[UIColor blueColor]CGColor];
    //就是这句话在关联彼此（UIBezierPath和CAShapeLayer）：
    shapelayer.path = aPath.CGPath;
    [self.view.layer addSublayer:shapelayer];

}

-(void)circleBezierPath{

    _timer = [NSTimer scheduledTimerWithTimeInterval:0.15 target:self selector:@selector(circleAnimationTypeOne) userInfo:nil repeats:YES];

    self.shapeLayerT = [CAShapeLayer layer];
    self.shapeLayerT.frame = CGRectMake(0, 0, 150, 150);
    self.shapeLayerT.position = self.view.center;
    self.shapeLayerT.fillColor = [UIColor clearColor].CGColor;

    //设置线条的宽度和颜色
    self.shapeLayerT.lineWidth = 2.0f;
    self.shapeLayerT.strokeColor = [UIColor redColor].CGColor;

    //设置stroke起始点
    self.shapeLayerT.strokeStart = 0;
    self.shapeLayerT.strokeEnd = 0;

    //创建出圆形贝塞尔曲线
    UIBezierPath * circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 150, 150)];

    //让贝塞尔曲线与CAShapeLayer产生联系
    self.shapeLayerT.path = circlePath.CGPath;
    //添加并显示
    [self.view.layer addSublayer:self.shapeLayerT];

    self.shapeLayerTM = [CAShapeLayer layer];
    self.shapeLayerTM.frame = CGRectMake(0, 0, 170, 170);
    self.shapeLayerTM.position = self.view.center;
    self.shapeLayerTM.fillColor = [UIColor clearColor].CGColor;

    //设置线条的宽度和颜色
    self.shapeLayerTM.lineWidth = 2.0f;
    self.shapeLayerTM.strokeColor = [UIColor blueColor].CGColor;

    //设置stroke起始点
    self.shapeLayerTM.strokeStart = 0;
    self.shapeLayerTM.strokeEnd = 0;

    //创建出圆形贝塞尔曲线
    UIBezierPath * circlePathTM = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 170, 170)];

    //让贝塞尔曲线与CAShapeLayer产生联系
    self.shapeLayerTM.path = circlePathTM.CGPath;
    //添加并显示
    [self.view.layer addSublayer:self.shapeLayerTM];
}

-(void)circleAnimationTypeOne{

    NSLog(@"strokeStart===%f",self.shapeLayerT.strokeStart);
    NSLog(@"strokeEnd====%f",self.shapeLayerT.strokeEnd);

    if (self.shapeLayerT.strokeEnd > 1 && self.shapeLayerT.strokeStart < 1) {

        self.shapeLayerT.strokeStart += 0.1;
        self.shapeLayerTM.strokeStart += 0.1;

    }else if(self.shapeLayerT.strokeStart == 0){

        self.shapeLayerT.strokeEnd += 0.1;
        self.shapeLayerTM.strokeEnd += 0.1;
    }

    if (self.shapeLayerT.strokeEnd == 0) {

        self.shapeLayerT.strokeStart = 0;
        self.shapeLayerTM.strokeStart = 0;
    }
    if (self.shapeLayerT.strokeStart == self.shapeLayerT.strokeEnd) {

        self.shapeLayerT.strokeEnd = 0;
        self.shapeLayerTM.strokeEnd = 0;
    }
}

//画两个圆形
-(void)createBezierPath:(CGRect)mybound{

    //外圆
    _trackPath = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:(mybound.size.width-0.7)/2 startAngle:0 endAngle:M_PI*2 clockwise:YES];
    _trackLayer = [CAShapeLayer new];
    [self.view.layer addSublayer:_trackLayer];
    _trackLayer.fillColor = nil;
    _trackLayer.strokeColor = [UIColor grayColor].CGColor;
    _trackLayer.path = _trackPath.CGPath;
    _trackLayer.lineWidth = 5;
    _trackLayer.frame = mybound;

    //内圆
    _progressPath = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:(mybound.size.width-0.7)/2 startAngle:-M_PI_2 endAngle:(M_PI*2)*0.7 clockwise:YES];
    _progressLayer = [CAShapeLayer new];
    [self.view.layer addSublayer:_progressLayer];
    _progressLayer.fillColor = nil;
    _progressLayer.strokeColor = [UIColor redColor].CGColor;

    _progressLayer.lineCap = kCALineCapRound;
    _progressLayer.path = _progressPath.CGPath;
    _progressLayer.lineWidth = 5;
    _progressLayer.frame = mybound;

}
@end