繪圖的實現
import "testView.h"
@interface testView ()
@property(nonatomic,strong)CAShapeLayer * trackeLayer;
@property(nonatomic,strong)UIBezierPath * trackPath;
@property(nonatomic,strong)CAShapeLayer * progressLayer;
@property(nonatomic,strong)UIBezierPath * progressPath;
@property(nonatomic,strong)CAGradientLayer * gradientLayer;
@end
@implementation testView
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
[self setUpTrackeLayer];
[self setUpProgressLayer];
self.progressWidth = 5;
}
return self;
}
-(void)setUpTrackeLayer{
_trackeLayer = [CAShapeLayer layer];
[self.layer addSublayer:_trackeLayer];
_trackeLayer.fillColor = nil;
_trackeLayer.frame = self.bounds;
}
-(void)setUpProgressLayer{
//建立
_progressLayer = [CAShapeLayer layer];
// 新增
[self.layer addSublayer:_progressLayer];
//設定填充色
_progressLayer.fillColor = [UIColor clearColor].CGColor;
// 設定尺寸
_progressLayer.frame = self.bounds;
// 設定開始的位置
_progressLayer.strokeStart = 0;
// 設定結束的位置
_progressLayer.strokeEnd = 0.6;
}
-(void)setTrack{
_trackPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
_trackeLayer.path = _trackPath.CGPath;
}
-(void)SetprogressPath{
// 這種貝塞爾曲線的patch 是可以改變的。可以多?思考實現掐的
_progressPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:- M_PI_2 endAngle:(M_PI * 2) * _progress - M_PI_2 clockwise:YES];
//.建立貝塞爾曲線
_progressPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:-M_PI/2 endAngle:M_PI*1.5 clockwise:YES];
// 給進度的layer確定範圍
_progressLayer.path = _progressPath.CGPath;
}
-(void)setProgressColor:(UIColor *)progressColor{
_progressLayer.strokeColor = progressColor.CGColor;
}
- (void)setTrackColor:(UIColor *)trackColor
{
_trackeLayer.strokeColor = trackColor.CGColor;
}
-(void)setProgress:(float)progress{
_progress = progress;
[self SetprogressPath];
[self set_gradientLayer];
}
-(void)setProgressWidth:(float)progressWidth{
_progressWidth = progressWidth;
_trackeLayer.lineWidth = _progressWidth;
_progressLayer.lineWidth = _progressWidth;
[self setTrack];
[self SetprogressPath];
}
//給進度的layer 設定漸變色
-(void)set_gradientLayer{
_gradientLayer = [CAGradientLayer layer];
[_gradientLayer setColors:[NSArray arrayWithObjects:(id)[[UIColor orangeColor] CGColor],(id)[UIColor greenColor].CGColor, nil]];
_gradientLayer.frame = self.bounds;
_gradientLayer.startPoint = CGPointMake(0, 0);
_gradientLayer.endPoint = CGPointMake(0, 1);
[_gradientLayer setMask:self.progressLayer];
[self.layer addSublayer:_gradientLayer];}
相關文章
- Jquery實現拖拽式繪圖工具jQuery繪圖
- Flask SocketIO 實現動態繪圖Flask繪圖
- CentOS6.5下實現R繪圖CentOS繪圖
- 探究 canvas 繪圖中撤銷(undo)功能的實現方式Canvas繪圖
- 論文第4章:iOS繪圖平臺的實現iOS繪圖
- 使用python matplotlib實現動圖繪製Python
- 小提琴圖的繪製方法:Python matplotlib實現Python
- 論文第5章:Android繪圖平臺的實現Android繪圖
- Python實現雙X軸雙Y軸繪圖Python繪圖
- 基於canvas實現波浪式繪製圖片Canvas
- 【原】使用Tkinter繪製GUI並結合Matplotlib實現互動式繪圖GUI繪圖
- 23個實用的Photoshop繪圖教程繪圖
- Python例項:僅繪製圖例而不繪製實際的圖形Python
- 自繪選單的實現 (轉)
- 怎麼自己製作地圖?如何快速實現簡單地圖繪製?地圖
- 精準測繪,實時掌控,天懋專網空間測繪系統助您實現掛圖作戰!
- CAD繪圖工具中的繪線命令繪圖
- Shapes for mac - 簡單實用的繪圖軟體Mac繪圖
- iOS繪圖iOS繪圖
- 繪圖工具繪圖
- PLT繪圖繪圖
- Android動畫實現繪製原理Android動畫
- canvas實現手動繪製矩形Canvas
- 【Android繪圖】繪圖之基礎篇(一)Android繪圖
- 【專案實戰】---ECharts繪製環形圖Echarts
- 使用joinjs繪製流程圖(五)-流程圖繪製JS流程圖
- python繪圖Python繪圖
- Matlab繪圖Matlab繪圖
- 字串繪圖片字串繪圖
- Python 繪圖Python繪圖
- 使用html5實現的繪製直線效果HTML
- svg實現路徑自己動態繪製的功能SVG
- word 的使用(七) —— 繪圖工具繪圖
- 【Go語言繪圖】圖片的旋轉Go繪圖
- mac好用的流程圖繪圖軟體分享~Mac流程圖繪圖
- R繪圖(06)——帶errorbar的柱狀圖繪圖ErrorORB
- 怎麼簡單的繪製拓撲圖,用這個工具能讓你輕鬆實現
- Matlab繪圖(2)透過程式碼進行區域性放大繪圖、多檔案繪圖Matlab繪圖