[控件] 动态实时设置CAShapeLayer贝塞尔曲线的坐标点

简介:

动态实时设置CAShapeLayer贝塞尔曲线的坐标点

效果图:

源码:

PathDirectionView.h 与 PathDirectionView.m

//
//  PathDirectionView.h
//  Path
//
//  Created by XianMingYou on 15/2/27.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "UIView+SetRect.h"

@interface PathDirectionView : UIView

/**
 *  起始点在右边
 */
@property (nonatomic) BOOL  startPointAtRight;

/**
 *  根据百分比显示
 *
 *  @param percent 百分比
 */
- (void)showPercent:(CGFloat)percent;

@end


//
//  PathDirectionView.m
//  Path
//
//  Created by XianMingYou on 15/2/27.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import "PathDirectionView.h"

@interface PathDirectionView () {
    CAShapeLayer  *_shapeLayer;
}

@end

@implementation PathDirectionView

/**
 *  修改当前view的backupLayer为CAGradientLayer
 *
 *  @return CAGradientLayer类名字
 */
+ (Class)layerClass {
    return [CAShapeLayer class];
}

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _shapeLayer             = (CAShapeLayer *)self.layer;
        _shapeLayer.fillColor   = [[UIColor clearColor] CGColor];
        _shapeLayer.strokeColor = [[UIColor redColor] CGColor];
        _shapeLayer.lineWidth   = 1.f;
        _shapeLayer.strokeEnd   = 0.f;
        _shapeLayer.opacity     = 0.f;
        _shapeLayer.path        = [self createPathWithHeight:0];
    }
    return self;
}

/**
 *  创建出贝塞尔曲线
 *
 *  @param height 高度
 *
 *  @return 贝塞尔曲线
 */
- (CGPathRef)createPathWithHeight:(CGFloat)height {
    UIBezierPath *bezierPath = UIBezierPath.bezierPath;
    
    CGPoint startPoint = CGPointZero;
    CGPoint endPoint   = CGPointZero;
    if (self.startPointAtRight == NO) {
        startPoint = CGPointMake(self.width, height);
        endPoint   = CGPointZero;
    } else {
        startPoint = CGPointMake(0, height);
        endPoint   = CGPointMake(self.width, 0);
    }
    
    [bezierPath moveToPoint:startPoint];
    [bezierPath addLineToPoint:endPoint];
    
    return bezierPath.CGPath;
}


- (void)showPercent:(CGFloat)percent {
    
    if (percent < 0) {
        _shapeLayer.path      = [self createPathWithHeight:0];
        _shapeLayer.strokeEnd = 0;
        _shapeLayer.opacity   = 0;
    } else if (percent >= 0 && percent <= 0.5f) { // [0, 0.5]
        _shapeLayer.path      = [self createPathWithHeight:0];
        _shapeLayer.strokeEnd = percent * 2.f;
        _shapeLayer.opacity   = percent * 2.f;
    } else if (percent <= 1.f) { // (0.5, 1]
        CGFloat currentPercent = percent - 0.5f;
        _shapeLayer.path      = [self createPathWithHeight:currentPercent * self.height * 2];
        _shapeLayer.strokeEnd = 1.f;
        _shapeLayer.opacity   = 1.f;
    } else { // (1, +无穷大)
        _shapeLayer.path      = [self createPathWithHeight:self.height];
        _shapeLayer.strokeEnd = 1.f;
        _shapeLayer.opacity   = 1.f;
    }
}

@end

ShowDownView.h 与 ShowDownView.m
//
//  ShowDownView.h
//  Path
//
//  Created by XianMingYou on 15/2/27.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "PathDirectionView.h"

@interface ShowDownView : UIView

- (void)showPercent:(CGFloat)percent;

@end


//
//  ShowDownView.m
//  Path
//
//  Created by XianMingYou on 15/2/27.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import "ShowDownView.h"

@interface ShowDownView ()

@property (nonatomic, strong) PathDirectionView *leftView;
@property (nonatomic, strong) PathDirectionView *rightView;

@end

@implementation ShowDownView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        CGFloat width  = frame.size.width / 2.f;
        CGFloat height = frame.size.height;
        
        CGRect leftRect  = CGRectMake(0, 0, width, height);
        CGRect rightRect = CGRectMake(width, 0, width, height);
        
        self.leftView  = [[PathDirectionView alloc] initWithFrame:leftRect];
        self.rightView = [[PathDirectionView alloc] initWithFrame:rightRect];
        self.rightView.startPointAtRight = YES;
        [self addSubview:self.leftView];
        [self addSubview:self.rightView];
    }
    return self;
}

- (void)showPercent:(CGFloat)percent {
    [self.leftView showPercent:percent];
    [self.rightView showPercent:percent];
}

@end

核心原理:

1. 即时的根据值的变化重新生成path值并赋值给CAShapeLayer

2. 即时的根据值得变化设定strokeEnd值

目录
相关文章
|
JavaScript
MAC升级nodejs和npm到最新版
第一步,先查看本机node.js版本: node -v 第二步,清除node.js的cache: sudo npm cache clean -f 第三步,安装 n 工具,这个工具是专门用来管理node.
5327 0
|
Linux 数据安全/隐私保护 Windows
阿里云服务器默认登录密码是多少?
阿里云服务器默认密码是什么?阿里云服务器没有默认密码,通过重置密码的方式来设置新的密码。阿里云服务器默认用户名Linux系统是root,Windows系统是administrator。
5572 0
阿里云服务器默认登录密码是多少?
|
数据安全/隐私保护 iOS开发 Perl
|
11天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1230 5
|
10天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1213 87
|
10天前
|
云栖大会
阿里云云栖大会2025年9月24日开启,免费申请大会门票,速度领取~
2025云栖大会将于9月24-26日举行,官网免费预约畅享票,审核后短信通知,持证件入场
1796 13
|
20天前
|
人工智能 运维 安全