iOS

UIBezierPath 贝塞尔曲线

2019-10-01  本文已影响0人  若风_412d

这个用的还挺多的,写下总结。曲线图,圆环,圆环进度条
1.双曲线:以前写的
https://www.jianshu.com/p/9613d10f9cbb
2.圆环
https://blog.csdn.net/u013282507/article/details/50247001

原理:
贝塞尔曲线只是规划了一个Layer的路径,而不能真正的展示出来,所以要和CAShapeLayer搭配使用,
通俗点就是UIBezierPath用来指定绘制图形路径,而CAShapeLayer就是根据路径来绘图的。

CAShapeLayer属于QuartzCore框架,继承自CALayer。

[图片上传中...(屏幕快照 2019-09-09 下午6.04.10.png-2c3224-1568023685234-0)]
屏幕快照 2019-09-09 下午6.04.10.png

圆环没有紧靠者btn,中间空了一段距离,只要改变半径行了。
全部代码


//
//  NanViewController.m
//  AutoBike
//
//  Created by macbook on 2019/9/9.
//  Copyright © 2019 maxteacherma. All rights reserved.
//

#import "NanViewController.h"
#define degreesToRadians(x) ((x) * M_PI / 180.0)

@interface NanViewController ()
@property (nonatomic, strong) CAShapeLayer *trackLayer;//layer
@property (nonatomic, strong) UIBezierPath *bezierPath;//贝塞了

@property (weak, nonatomic) IBOutlet UIButton *bezierBtn;//杯赛btn
@property (weak, nonatomic) IBOutlet UIView *contentView;//内容



@end

@implementation NanViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self.bezierBtn.layer addSublayer:self.trackLayer];

}
- (UIBezierPath *)bezierPath
{
    if (!_bezierPath) {
        
        CGFloat width = CGRectGetWidth(self.bezierBtn.frame)/2.0f;
        CGFloat height = CGRectGetHeight(self.bezierBtn.frame)/2.0f;
        CGPoint centerPoint = CGPointMake(width, height);
        float radius = CGRectGetWidth(self.bezierBtn.frame)/2+10;//半径
        
        _bezierPath = [UIBezierPath bezierPathWithArcCenter:centerPoint
                                                     radius:radius
                                                 startAngle:degreesToRadians(-90)
                                                   endAngle:degreesToRadians(270)
                                                  clockwise:YES];
        
    }
    return _bezierPath;
}

- (CAShapeLayer *)trackLayer
{
    if (!_trackLayer) {
        _trackLayer = [CAShapeLayer layer];
        _trackLayer.frame = _bezierBtn.bounds;
   //     _trackLayer.position = _bezierBtn.position;
        //        _trackLayer.fillColor = self.fillColor.CGColor ? self.fillColor.CGColor : [UIColor colorWithRed:0.0/255.0 green:0.0/255.0 blue:0.0/255.0 alpha:0.3].CGColor ;
        _trackLayer.fillColor = [UIColor clearColor].CGColor;//圆环内部颜色

        _trackLayer.lineWidth = 5.f;//宽度
        _trackLayer.strokeColor =  [UIColor redColor].CGColor ;//圆环颜色
        _trackLayer.strokeStart = 0.f;
        _trackLayer.strokeEnd = 1.f;

        _trackLayer.path = self.bezierPath.CGPath;
    }
    return _trackLayer;
}
#pragma mark ==点击
#pragma mark ==男

- (IBAction)nanBtn:(id)sender {
    
}



/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

@end

3.圆环进度条
原理加个动画

- (CAShapeLayer *)progressLayer
{
    if (!_progressLayer) {
        _progressLayer = [CAShapeLayer layer];
        _progressLayer.frame = self.bounds;
        _progressLayer.fillColor = [UIColor clearColor].CGColor;
        _progressLayer.lineWidth = self.lineWidth ? self.lineWidth : 2.f;
        _progressLayer.lineCap = kCALineCapRound;
        _progressLayer.strokeColor = self.progressColor.CGColor ? self.progressColor.CGColor  : [UIColor grayColor].CGColor;
        _progressLayer.strokeStart = 0.f;
        
        CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        pathAnimation.duration = self.animationDuration;
        pathAnimation.fromValue = @(0.0);
        pathAnimation.toValue = @(1.0);
        pathAnimation.removedOnCompletion = YES;
        pathAnimation.delegate = self;
        [_progressLayer addAnimation:pathAnimation forKey:nil];

        _progressLayer.path = _bezierPath.CGPath;
    }
    return _progressLayer;
}
上一篇 下一篇

猜你喜欢

热点阅读