动态实时设置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. 回退Ubuntu记录

    前言 由于Ubuntu18经常出错,因而决定回退Ubuntu16,下面是记录回退问题及美化,以便以后需要. 问题总结 磁盘挂载 挂载其他磁盘分区时,提示错误"Metadata kept in ...

  2. 一条命令在Centos7中换163 yum源、安装python3并与python2共存、使用豆瓣pip源加速

    打开一个Terminal: 换yum源: mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup & ...

  3. tomcat启动(Ⅶ)请求处理--Processor.process(SocketWrapper<S> socketWrapper)

    tomcat启动(六)Catalina分析-StandardServer.start() 上一篇分析到:Http11NioProcessor.process(SocketWrapper<S> ...

  4. spring整合elasticsearch之环境搭建

    推荐一个非常好的博客: 点我 // 测试使用docker下启动的es不管用, 在linux下或者windows下运行的es可用 // 进一步测试docker下启动的es链接时, 开启嗅探也链接不上, ...

  5. 玩转mongodb(二):mongodb基础知识

    常用基本数据类型: null null用于表示空值或者不存在的字段: {"data":null} 布尔型 布尔类型只有两个值,true和false: {"data&quo ...

  6. 个人总结(Alpha阶段)

    Alpha总结 我们在alpha 结束之后, 每位写一个博客, 回顾并总结自己的alpha 过程,哪些方面做的好的,哪些方面做得不足需要改进的 提出问题 同时,大家一定会在过程中产生了很多问题, 结合 ...

  7. oracle 报错归纳总结

    1.ORA-00904 正常情况下是找不到字段(大概率字段名字错了) 还有一种比较特别的情况实在设计DB的时候,字段小写,在sql查询工具自动提示的时候都是大写,造成字段找不到的情况.

  8. Ionic APP 热更新

    开门见山,本文主题:cordova-hot-code-push 作用:cordova热更新插件,提供了在应用程序中对基于Web的内容进行自动更新的功能. GitHub地址:https://github ...

  9. include,forward和param指令

  10. BZOJ1597: [Usaco2008 Mar]土地购买(dp 斜率优化)

    题意 题目链接 Sol 重新看了一遍斜率优化,感觉又有了一些新的认识. 首先把土地按照\((w, h)\)排序,用单调栈处理出每个位置第向左第一个比他大的位置,显然这中间的元素是没用的 设\(f[i] ...