pexels-trung-nguyen-2747045.jpg

需求來源

項目中需要分析一次護(hù)理過程中,溫度占比，經(jīng)過和產(chǎn)品經(jīng)理一番討論之后，決定將表現(xiàn)方式由曲線圖改為環(huán)形占比圖。相比較曲線圖，環(huán)形占比圖能夠更加清晰的展示想要表達(dá)的東西（當(dāng)然也有實現(xiàn)成本低的原因），廢話不多說，來看一下如何實現(xiàn)一個環(huán)形占比圖。

設(shè)計圖

截屏2022-02-22 下午5.11.14.png

實現(xiàn)思路

如上圖，要實現(xiàn)這樣一個封閉的環(huán)形占比圖，需要分幾步來完成，首先，確定圓環(huán)的起始位置，確定首先需要繪制哪一個圓環(huán)，然后根據(jù)每一個圓環(huán)的占比，將占比轉(zhuǎn)化為角度，然后使用繪制圓的方法，繪制出對應(yīng)的圓環(huán)即可。具體代碼如下:

實現(xiàn)代碼

繪制第一部分的圓環(huán)，占比為1，總占比為7

CAShapeLayer *layer = [CAShapeLayer new];
layer.lineWidth = 20;
//圓環(huán)的顏色
layer.strokeColor = HEXCOLOR(0xC0FBFF).CGColor;
//背景填充色
layer.fillColor = [UIColor clearColor].CGColor;
//設(shè)置半徑為100
CGFloat radius = 81/2 - 20/2;
//按照順時針方向
BOOL clockWise = true;
//初始化一個路徑
//完整的圓
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake((70), (82)/2) radius:radius startAngle:(-0.5f * M_PI) endAngle:(-0.5f * M_PI) + 0.14 * M_PI * 2 clockwise:clockWise];
layer.path = [path CGPath];
[self.layer addSublayer:layer];

繪制第二部分的圓環(huán)，和第一個圓環(huán)的圓心保持一致，起點為第一個圓環(huán)的終點，占比為1.6，總占比為7

CAShapeLayer *layer1 = [CAShapeLayer new];
layer1.lineWidth = 20;
//圓環(huán)的顏色
layer1.strokeColor = HEXCOLOR(0xFFE86A).CGColor;
//背景填充色
layer1.fillColor = [UIColor clearColor].CGColor;
//初始化一個路徑
UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake((70), (82)/2) radius:radius startAngle:(-0.5f * M_PI) + 0.14 * M_PI * 2 endAngle:((-0.5f * M_PI) + 0.37 * M_PI * 2) clockwise:clockWise];
layer1.path = [path1 CGPath];
[self.layer addSublayer:layer1];

繪制第三部分的圓環(huán)，和第一個圓環(huán)和第二個圓環(huán)的圓心保持一致，起點為第二個圓環(huán)的終點，占比為4，總占比為7

CAShapeLayer *layer2 = [CAShapeLayer new];
layer2.lineWidth = (20);
//圓環(huán)的顏色
layer2.strokeColor = HEXCOLOR(0xFFB94B).CGColor;
//背景填充色
layer2.fillColor = [UIColor clearColor].CGColor;
//初始化一個路徑
UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake((70), (82)/2) radius:radius startAngle:((-0.5f * M_PI) + 0.37 * M_PI * 2) endAngle:M_PI*1.5 clockwise:clockWise];
layer2.path = [path2 CGPath];
[self.layer addSublayer:layer2];

結(jié)尾

至此，環(huán)形占比圖實現(xiàn)已經(jīng)完成了?？傮w來說，實現(xiàn)還是比較簡單的，如果有哪塊不懂的地方?？梢栽u論區(qū)留言，我會及時回復(fù)。