增加 UIBezierPath 线宽会改变几何形状......？
Increasing UIBezierPath linewidth changes geometry...?
我创建了一个圆形仪表作为计时器的视觉指示器。仪表有多个部分来指示计时器的不同阶段。 Image here
问题是，当我向路径添加 线宽 时，数学不再相加。例如，上图中的蓝色和红色部分应该大小相同（圆的百分比相同），但由于线宽，红色与蓝色重叠，同样，灰色部分与蓝色重叠（我我逆时针绘制线段）——所以蓝色看起来更小。我知道我的线段创建正确，因为如果我将线宽设置为 1.0，我会得到以下正确结果。 Image here
如果有人对此有任何见解，那就太好了。
提供上下文的代码：
//create path
let circularPath = UIBezierPath(arcCenter: view.center, radius: 100, startAngle: -CGFloat.pi/2, endAngle: 3*CGFloat.pi/2, clockwise: true)
//create segments - this is in a loop that adjusts start/end for all the segments
var tempShapeLayer = CAShapeLayer()
tempShapeLayer.path = circularPath.cgPath
tempShapeLayer.lineWidth = 10
tempShapeLayer.fillColor = UIColor.clear.cgColor
tempShapeLayer.lineCap = CAShapeLayerLineCap.square
tempShapeLayer.strokeStart = start
tempShapeLayer.strokeEnd = end
//next simply add some colors and add to view
您使用了错误的线帽样式。你应该使用 .butt.
不同样式的线帽可以在CGLineCap中找到。
butt:
A line with a squared-off end. Core Graphics draws the line to extend only to the exact endpoint of the path.
square:
A line with a squared-off end. Core Graphics extends the line beyond the endpoint of the path for a distance equal to half the line width.
使用 square 上限会导致线的两边比应有的稍长一点。对于除最后绘制的线段之外的所有线段，这不是问题，因为它们的端点将被其他线段覆盖。但是对于最后绘制的线段，两边看起来都比应有的长。
您应该使用 .butt 作为线帽样式。
我创建了一个圆形仪表作为计时器的视觉指示器。仪表有多个部分来指示计时器的不同阶段。 Image here
问题是，当我向路径添加 线宽 时，数学不再相加。例如，上图中的蓝色和红色部分应该大小相同（圆的百分比相同），但由于线宽，红色与蓝色重叠，同样，灰色部分与蓝色重叠（我我逆时针绘制线段）——所以蓝色看起来更小。我知道我的线段创建正确，因为如果我将线宽设置为 1.0，我会得到以下正确结果。 Image here
如果有人对此有任何见解，那就太好了。
提供上下文的代码：
//create path
let circularPath = UIBezierPath(arcCenter: view.center, radius: 100, startAngle: -CGFloat.pi/2, endAngle: 3*CGFloat.pi/2, clockwise: true)
//create segments - this is in a loop that adjusts start/end for all the segments
var tempShapeLayer = CAShapeLayer()
tempShapeLayer.path = circularPath.cgPath
tempShapeLayer.lineWidth = 10
tempShapeLayer.fillColor = UIColor.clear.cgColor
tempShapeLayer.lineCap = CAShapeLayerLineCap.square
tempShapeLayer.strokeStart = start
tempShapeLayer.strokeEnd = end
//next simply add some colors and add to view
您使用了错误的线帽样式。你应该使用 .butt.
不同样式的线帽可以在CGLineCap中找到。
butt:A line with a squared-off end. Core Graphics draws the line to extend only to the exact endpoint of the path.
square:A line with a squared-off end. Core Graphics extends the line beyond the endpoint of the path for a distance equal to half the line width.
使用 square 上限会导致线的两边比应有的稍长一点。对于除最后绘制的线段之外的所有线段，这不是问题，因为它们的端点将被其他线段覆盖。但是对于最后绘制的线段，两边看起来都比应有的长。
您应该使用 .butt 作为线帽样式。