| 最近在写一个 有关打分的项目, 项目要求分数要用曲线表示 (贝塞尔曲线).从网上搜寻了一些资料,就实现理想中的效果.其过程还是费了些功夫, 遵循方便自己,方便大家的心态, 把实现的核心代码贡献出来.供大家参考.
首先看效果图
实现效果图.png
其次掌握贝塞尔曲线的圆弧度图
贝塞尔曲线实现 以及 弧度关系.png
最后实现代码
1. 贝塞尔曲线的起始 弧度是 M_PI_4 * 3 终止弧度是 M_PI_4
2. 两个贝塞尔曲线重叠 只是颜色不同
3. 根据圆心坐标 半径 圆心角 计算终点坐标. 显示小圆球位置.
核心代码如下
// 白色的曲线
// 创建路径对象
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];
// 橘红色曲线
// 根据模型的分数 或者 正确率 来 画曲线
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];
根据圆心坐标 和 半径 圆心角计算 小圆点 坐标
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); // 先提前创建小圆点(UIImageView) 只在这里 更新坐标
用到的计算公式
已知圆心坐标(a,b)和半径r,圆心角为C,求对应的圆上的坐标
x=a+r×cosC
y=b+r×sinC
