动态实时设置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 = .f;
_shapeLayer.strokeEnd = .f;
_shapeLayer.opacity = .f;
_shapeLayer.path = [self createPathWithHeight:];
}
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(, height);
endPoint = CGPointMake(self.width, );
} [bezierPath moveToPoint:startPoint];
[bezierPath addLineToPoint:endPoint]; return bezierPath.CGPath;
} - (void)showPercent:(CGFloat)percent { if (percent < ) {
_shapeLayer.path = [self createPathWithHeight:];
_shapeLayer.strokeEnd = ;
_shapeLayer.opacity = ;
} else if (percent >= && percent <= 0.5f) { // [0, 0.5]
_shapeLayer.path = [self createPathWithHeight:];
_shapeLayer.strokeEnd = percent * .f;
_shapeLayer.opacity = percent * .f;
} else if (percent <= .f) { // (0.5, 1]
CGFloat currentPercent = percent - 0.5f;
_shapeLayer.path = [self createPathWithHeight:currentPercent * self.height * ];
_shapeLayer.strokeEnd = .f;
_shapeLayer.opacity = .f;
} else { // (1, +无穷大)
_shapeLayer.path = [self createPathWithHeight:self.height];
_shapeLayer.strokeEnd = .f;
_shapeLayer.opacity = .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 / .f;
CGFloat height = frame.size.height; CGRect leftRect = CGRectMake(, , width, height);
CGRect rightRect = CGRectMake(width, , 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值

[控件] 动态实时设置CAShapeLayer贝塞尔曲线的坐标点的更多相关文章

  1. 为控件Button设置快捷键(组合键)

    控件MenuStrip和ContextMenuStrip可通过ShortCcutKeys属性设置快捷键,而控件Button没有ShortcutKey属性,如何为控件Button设置快捷键呢(组合件键) ...

  2. Delphi HTTPRIO控件怎么设置超时参数

    HTTPRIO控件怎么设置超时参数 //HTTPRIO1: THTTPRIO  设置5分钟超时 HTTPRIO1.HTTPWebNode.ConnectTimeout := 5000; Connect ...

  3. Android中EditText,Button等控件的设置

    EditText可以使用:TextView.setEnabled(true)来设置为可编辑,其实很简单,写在这里以便以后自己查看. Button设置可用性:setVisibility(View.VIS ...

  4. ScrollView子控件高度设置无效

    ScrollView子控件高度设置无效 简述 项目中引入了第三方的下拉刷新包PullToRefreshScrollView. 由于我之前布局未考虑下拉刷新功能.后来暂时发现添加上去,发现.子控件的高度 ...

  5. dev控件ASPxComboBox设置ReadOnly="true"后

    dev控件ASPxComboBox设置ReadOnly="true"后,在后台OnCallback事件中赋值前台不显示

  6. DEV控件ASPxTextBox设置ClientEnabled="false"之后出现的问题

    DEV控件ASPxTextBox设置ClientEnabled="false"之后,js中设置文本框的值后,按钮后台点击事件中获取文本框的值为空.

  7. duilib 修复Text控件无法设置宽度的bug,增加自动加算宽度的属性

    转载请说明原出处,谢谢~~: 今天有朋友反映CTextUI控件无法设置宽度,于是修复了这个bug,顺便给Text控件增加了一个自动计算宽度的属性,描述如下 <Attribute name=&qu ...

  8. 几个关于控件的优先级: UseSystemPasswordChar > PasswordChar > 控件属性设置

    using System; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms ...

  9. DevExpress 控件中设置分隔符

    原文:DevExpress 控件中设置分隔符 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net ...

随机推荐

  1. 深度学习--RNN,LSTM

    一.RNN 1.定义 递归神经网络(RNN)是两种人工神经网络的总称.一种是时间递归神经网络(recurrent neural network),另一种是结构递归神经网络(recursive neur ...

  2. MySQL decimal unsigned 更新负数不报错却为0

    今天在验证接口的并发问题时,把之前通过 redis 解决的并发压力转移到 mysql 上(redis 在 set 保存数据和数据过期需要去向数据库获取时存在时延,会存在空挡造成大并发多插入数据的风险: ...

  3. 深入理解Java虚拟机:第2章 Java内存区域与内存溢出异常

    目录 2.2 运行时数据区域 Java堆 方法区 虚拟机栈 本地方法栈 程序计数器 2.3 HotSpot虚拟机对象探秘 对象的创建 对象的内存布局 对象的访问定位   2.2 运行时数据区域 Jav ...

  4. Linux时间命令

    Linux一般有系统时间和硬件时间之分,date命令是显示和操作系统时间:hwclock用来操作硬件时间(日期).日期和时间很重要,比如错误的日期和时间会导致你不能编译程序. 1 date 用法:   ...

  5. redis High Availability---Redis Sentinel翻译

    注意,本文档为最新(11月21日),旧版本的可以参考:http://redis.io/topics/sentinel-old 不鼓励使用旧版本的文档. Redis Sentinel是一个用来管理Red ...

  6. rails render

    Render結果 在根據request資訊做好資料處理之後,我們接下來就要回傳結果給用戶.事實上,就算你什麼都不處理,Action方法裡面空空如也,甚至不定義Action,Rails預設也還是會執行r ...

  7. Mac配置多个版本JDK

    2016年mac上已经安装有jdk1.6的版本  目录在/Library/Java/JavaVirtualMachines/1.6.0.jdk 有时候mac版本跟新会自动删除jdk1.6 所以要去ma ...

  8. UOJ #357. 【JOI2017春季合宿】Sparklers

    Description 小S和小M去看花火大会. 一共有 n 个人按顺序排成一排,每个人手上有一个仅能被点燃一次的烟花.最开始时第 K 个人手上的烟花是点燃的. 烟花最多能燃烧 T 时间.每当两个人的 ...

  9. UIKit 框架之UICollectionView

    1.自定义UICollectionViewCell 在myCollectionViewCell.h中声明两个属性 // // myCollectionViewCell.h // UICollectio ...

  10. bootstrap table分页,重新数据查询时页码为当前页问题

    问题描述: 使用bootstrap table时遇到一个小问题,第一次查询数据未5页,翻页到第5页后,选中条件再次查询数据时,传到后端页码仍旧为5,而此时数据量小于5页,表格显示为未查询到数据. 处理 ...