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。


圆环没有紧靠者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;
}