最终要达到的效果类似下图
如图,一开始看别人的代码时,没有看明白线宽(lineWidth)和 内圈 半径 (innerCircleRadius)画图的半径(radius)的关系,
radius = innerCircleRadius + lineWidth / 2;
(外圈半径)outerCircleRadius = radius + lineWidth / 2;
// 画扇形的主要代码
// 此方法用同一个path 根据layer.strokeStart = start; layer.strokeEnd = end 区分扇形 并 设置每一个扇形的颜色 性能高 但是当点击扇形时不能区分具体点击哪一个扇形
_dataArr = @[@1,@5,@10,@1,@4,@13];
CGFloat total = [[_dataArr valueForKeyPath:@"@sum.floatValue"] floatValue];
// 开始位置
CGFloat start = 0.0f;
// 结束位置
CGFloat end = 0.0f;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetMidX(self.bounds),CGRectGetMidY(self.bounds)) radius:_radius startAngle:-M_PI_2 endAngle:M_PI_2 * 3 clockwise:YES];
for (NSInteger i = 0; i <_dataArr.count;i++) {
CGFloat num = [_dataArr[i] floatValue];
end = num / total + start;
PieShapeLayer *layer = [PieShapeLayer layer];
layer.lineWidth = _borderWidth;
layer.strokeColor = _colorArr[i].CGColor;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeStart = start;
layer.strokeEnd = end;
layer.path = path.CGPath;
[self.layer addSublayer:layer];
start = end;
}
}
// 第二步 画线
画线其实就三个点
起始点 : 如上图所示如果想求出起始点 就要知道 外圈半径(上文有提到)角度a
然后根据 初中的三角函数的知识求出 起始点的x,y 相对于圆点x,y的距离
中间转折点(middlePoint): 和起始点一样,只是距离 = outerCircleRadius + 常数
终点(endPoint): 终点的y 和 middlePoint.y 相等 x值分为两种情况 ,
一是当(-M_PI_2 < a && a < M_PI_2) 向右画 和所在view的边界有一个距离
endPoint = CGPointMake(CGRectGetMaxX(self.bounds) - lineMargin, middlePoint.y);
else 向 左画
endPoint = CGPointMake(CGRectGetMinX(self.bounds) + lineMargin, middlePoint.y);
显示百分比的label 的位置分析也是一样的在此不再赘述,还有 画扇形时也可以加上动画 demo和 参考链接里都有相关代码