使用CAShapeLayer與UIBezierPath畫出想要的圖形
步驟:
1、新建UIBezierPath物件bezierPath
2、新建CAShapeLayer物件caShapeLayer
3、將bezierPath的CGPath賦值給caShapeLayer的path,即caShapeLayer.path = bezierPath.CGPath
4、把caShapeLayer新增到某個顯示該圖形的layer中
下面的小例子是一個環形的progress程式碼,有具體的使用方法
.h檔案:
#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>
@interface KACircleProgressView : UIView {
CAShapeLayer *_trackLayer;
UIBezierPath *_trackPath;
CAShapeLayer *_progressLayer;
UIBezierPath *_progressPath;
}
@property (nonatomic, strong) UIColor *trackColor;
@property (nonatomic, strong) UIColor *progressColor;
@property (nonatomic) float progress;//0~1之間的數
@property (nonatomic) float progressWidth;
- (void)setProgress:(float)progress animated:(BOOL)animated;
@end
.m檔案:
#import "KACircleProgressView.h"
@implementation KACircleProgressView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
_trackLayer = [CAShapeLayer new];
[self.layer addSublayer:_trackLayer];
_trackLayer.fillColor = nil;
_trackLayer.frame = self.bounds;
_progressLayer = [CAShapeLayer new];
[self.layer addSublayer:_progressLayer];
_progressLayer.fillColor = nil;
_progressLayer.lineCap = kCALineCapRound;
_progressLayer.frame = self.bounds;
//預設5
self.progressWidth = 5;
}
return self;
}
- (void)setTrack
{
_trackPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];;
_trackLayer.path = _trackPath.CGPath;
}
- (void)setProgress
{
_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];
_progressLayer.path = _progressPath.CGPath;
}
- (void)setProgressWidth:(float)progressWidth
{
_progressWidth = progressWidth;
_trackLayer.lineWidth = _progressWidth;
_progressLayer.lineWidth = _progressWidth;
[self setTrack];
[self setProgress];
}
- (void)setTrackColor:(UIColor *)trackColor
{
_trackLayer.strokeColor = trackColor.CGColor;
}
- (void)setProgressColor:(UIColor *)progressColor
{
_progressLayer.strokeColor = progressColor.CGColor;
}
- (void)setProgress:(float)progress
{
_progress = progress;
[self setProgress];
}
- (void)setProgress:(float)progress animated:(BOOL)animated
{
}
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
@end
使用:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
KACircleProgressView *progress = [[KACircleProgressView alloc] initWithFrame:CGRectMake(20, 40, 100, 100)];
[self.view addSubview:progress];
progress.trackColor = [UIColor blackColor];
progress.progressColor = [UIColor orangeColor];
progress.progress = 0.7;//progress所佔比例
progress.progressWidth = 10;//圖形圓的粗細
}
效果圖:

效果圖.png
相關文章
- UIBezierPath+CAShapeLayer繪製微信聊天圖片效果UI
- 2.2 畫出函式圖形函式
- AUTOCAD——圖形的輸入與輸出
- 箱形圖(python畫圖)Python
- 畫影圖形: SVG & Canvas 圖形對比SVGCanvas
- css 畫圖形大全CSS
- DrawPad 圖形繪畫工具
- DrawPad圖形繪畫工具
- MongoDB圖形化工具的使用與java操作MongoDBJava
- 圖形學 畫直線 DDA掃描法與中點畫線法
- mac圖形繪畫工具:DrawPadMac
- DrawPad for mac 圖形繪畫工具Mac
- DrawPad for mac圖形繪畫工具Mac
- 動畫-CAShapeLayer實現QQ訊息紅點拖拽效果動畫
- 使用Excel畫出各類統計圖(3)Excel
- Quart2D 畫圖一 (簡單畫線、形狀)
- CSS3的過渡,動畫,圖形轉換CSSS3動畫
- Java圖形化:Swing表格的使用Java
- 使用SAPGUI畫圖GUI
- Viso的物件圖形複製到word,發現圖形畫布底部有大量空白,如何解決物件
- CAGradientLayer + UIBezierPath 為檢視畫漸變背景色並帶有弧度UI
- 使用css繪製圖形CSS
- CAShaperLayer&UIBezierPath系列(二)UI
- CAShaperLayer&UIBezierPath系列(一)UI
- Vue 你想要的流程圖Vue流程圖
- 使用SCRT+XMING 圖形介面
- 26 使用者圖形介面
- 使用css 畫三角形的三種方法CSS
- AI 畫圖真刺激,手把手教你如何用 ComfyUI 來畫出刺激的圖AIUI
- CSS畫出半圓,四分之一圓,三角等圖形CSS
- 第9章 CSS3中的變形與動畫(下)CSSS3動畫
- 第8章 CSS3中的變形與動畫(上)CSSS3動畫
- 快來玩AI畫圖!StableDiffusion模型搭建與使用入門~AI模型
- GO-圖形使用者介面Go
- gofiber: 使用圖形驗證碼dGo
- JavaGUI——Java圖形使用者介面JavaGUI
- 遊戲原畫教程:角色設計中的幾個基本圖形的用法遊戲
- 設計初學者必學之AI圖形描邊:寬度工具與畫筆工具AI
- WPF3D立方體圖形展開動畫思路3D動畫