| 最近在寫一個 有關(guān)打分的項目, 項目要求分?jǐn)?shù)要用曲線表示 (貝塞爾曲線).從網(wǎng)上搜尋了一些資料,就實現(xiàn)理想中的效果.其過程還是費了些功夫, 遵循方便自己,方便大家的心態(tài), 把實現(xiàn)的核心代碼貢獻(xiàn)出來.供大家參考.
首先看效果圖
實現(xiàn)效果圖.png
其次掌握貝塞爾曲線的圓弧度圖
貝塞爾曲線實現(xiàn) 以及 弧度關(guān)系.png
最后實現(xiàn)代碼
1. 貝塞爾曲線的起始 弧度是 M_PI_4 * 3 終止弧度是 M_PI_4
2. 兩個貝塞爾曲線重疊 只是顏色不同
3. 根據(jù)圓心坐標(biāo) 半徑 圓心角 計算終點坐標(biāo). 顯示小圓球位置.
核心代碼如下
// 白色的曲線
// 創(chuàng)建路徑對象
UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.topView.center.x, self.topView.center.y - 85) radius:80 startAngle:M_PI_4 * 3 endAngle:M_PI_4 clockwise:true];
CAShapeLayer * pathLayer = [CAShapeLayer layer];
pathLayer.lineWidth = 10.0;
pathLayer.strokeColor = [[UIColor whiteColor] CGColor];
pathLayer.fillColor = nil;
pathLayer.path = [path CGPath];
[self.topView.layer addSublayer:pathLayer];
// 橘紅色曲線
// 根據(jù)模型的分?jǐn)?shù) 或者 正確率 來 畫曲線
CGFloat endPoint = ((M_PI_2 * 3) * reportModel.rightRate.doubleValue * 0.01) + M_PI_4 * 3;
UIBezierPath * path1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.topView.center.x, self.topView.center.y - 85) radius:80 startAngle:M_PI_4 * 3 endAngle:endPoint clockwise:true];
CAShapeLayer * pathLayer1 = [CAShapeLayer layer];
pathLayer1.lineWidth = 10.0;
pathLayer1.strokeColor = [[UIColor orangeColor] CGColor];
pathLayer1.fillColor = nil;
pathLayer1.path = [path1 CGPath];
[self.topView.layer addSublayer:pathLayer1]; // 添加到視圖上
self.totalTimeLabel.text = reportModel.totalTime;
self.rightRateLabel.text = reportModel.rightRate;
self.totalDefeatLabel.text = reportModel.totalDefeat;
self.showAnswerInfo.attributedText = [self createShowAnswerInfo:reportModel];
根據(jù)圓心坐標(biāo) 和 半徑 圓心角計算 小圓點 坐標(biāo)
CGFloat X = self.topView.center.x + 80 * cos(endPoint);
CGFloat Y = self.topView.center.y - 85 + 80 * sin(endPoint);
self.circleImage.frame = CGRectMake(X - 7.5, Y - 7.5, 15, 15); // 先提前創(chuàng)建小圓點(UIImageView) 只在這里 更新坐標(biāo)
用到的計算公式
已知圓心坐標(biāo)(a,b)和半徑r,圓心角為C,求對應(yīng)的圓上的坐標(biāo)
x=a+r×cosC
y=b+r×sinC
