CAShapeLayer 的描边停在错误的点?
Stroke of CAShapeLayer stops at wrong point?
我画了一个简单的循环进度图是这样的:
let trackLayer:CAShapeLayer = CAShapeLayer()
let circularPath:UIBezierPath = UIBezierPath(arcCenter: CGPoint(x: progressView.frame.width / 2, y: 39.5), radius: progressView.layer.frame.size.height * 0.4, startAngle: -CGFloat.pi / 2, endAngle: 2 * CGFloat.pi, clockwise: true)
trackLayer.path = circularPath.cgPath
trackLayer.strokeColor = UIColor.lightGray.cgColor
trackLayer.lineWidth = 6
trackLayer.fillColor = UIColor.clear.cgColor
trackLayer.lineCap = kCALineCapRound
progressView.layer.insertSublayer(trackLayer, at: 0)
let progressLayer:CAShapeLayer = CAShapeLayer()
progressLayer.path = circularPath.cgPath
progressLayer.strokeColor = UIColor.blue.cgColor
progressLayer.lineWidth = 6
progressLayer.fillColor = UIColor.clear.cgColor
progressLayer.lineCap = kCALineCapSquare
progressLayer.strokeEnd = 0
progressView.layer.insertSublayer(progressLayer, above: trackLayer)
并且在某个事件上,我尝试更新 progressLayer
:
if let sublayers = progressView.layer.sublayers {
(sublayers[1] as! CAShapeLayer).strokeEnd = 0.5
}
现在如果我对strokeEnd
理解正确的话,0
是循环路径的起点,1
是终点,也就是说0.5
应该让它走到一半,对吗?这是我得到的:
我测试了多个值,结果发现 0.78
周围是一个完整的圆。高于此值,一直到 1
,都不会改变任何内容。谁能告诉我我在这里缺少什么。也许我的圆形路径的开始或结束角度有问题?或者,也许我只是完全误解了 strokeEnd
的工作原理,在这种情况下,我们将不胜感激。
Can anyone tell me what I'm missing here. Perhaps a problem with the start or end angle of my circular path?
没错。考虑指定为形状图层路径的路径 (circularPath
)。它从 startAngle: -CGFloat.pi / 2
到 endAngle: 2 * CGFloat.pi
。这比一个完整的圆多。你有看到?是一个四分之一圆!
这就是为什么在 0.78
以上(实际上 0.8
或五分之四),strokeEnd
值的变化似乎没有任何变化;你只是在画圆的起点,重新画你已经画的圆的一部分。
你的意思可能是
startAngle: -.pi / 2.0, endAngle: 3 * .pi / 2.0
(虽然 I 会做的是从 0
到 .pi*2
并应用旋转变换以便从顶部开始绘图) .
您的代码的另一个问题可能会导致后续问题,即您忘记了为任一层提供框架。因此它们没有尺寸。
我画了一个简单的循环进度图是这样的:
let trackLayer:CAShapeLayer = CAShapeLayer()
let circularPath:UIBezierPath = UIBezierPath(arcCenter: CGPoint(x: progressView.frame.width / 2, y: 39.5), radius: progressView.layer.frame.size.height * 0.4, startAngle: -CGFloat.pi / 2, endAngle: 2 * CGFloat.pi, clockwise: true)
trackLayer.path = circularPath.cgPath
trackLayer.strokeColor = UIColor.lightGray.cgColor
trackLayer.lineWidth = 6
trackLayer.fillColor = UIColor.clear.cgColor
trackLayer.lineCap = kCALineCapRound
progressView.layer.insertSublayer(trackLayer, at: 0)
let progressLayer:CAShapeLayer = CAShapeLayer()
progressLayer.path = circularPath.cgPath
progressLayer.strokeColor = UIColor.blue.cgColor
progressLayer.lineWidth = 6
progressLayer.fillColor = UIColor.clear.cgColor
progressLayer.lineCap = kCALineCapSquare
progressLayer.strokeEnd = 0
progressView.layer.insertSublayer(progressLayer, above: trackLayer)
并且在某个事件上,我尝试更新 progressLayer
:
if let sublayers = progressView.layer.sublayers {
(sublayers[1] as! CAShapeLayer).strokeEnd = 0.5
}
现在如果我对strokeEnd
理解正确的话,0
是循环路径的起点,1
是终点,也就是说0.5
应该让它走到一半,对吗?这是我得到的:
我测试了多个值,结果发现 0.78
周围是一个完整的圆。高于此值,一直到 1
,都不会改变任何内容。谁能告诉我我在这里缺少什么。也许我的圆形路径的开始或结束角度有问题?或者,也许我只是完全误解了 strokeEnd
的工作原理,在这种情况下,我们将不胜感激。
Can anyone tell me what I'm missing here. Perhaps a problem with the start or end angle of my circular path?
没错。考虑指定为形状图层路径的路径 (circularPath
)。它从 startAngle: -CGFloat.pi / 2
到 endAngle: 2 * CGFloat.pi
。这比一个完整的圆多。你有看到?是一个四分之一圆!
这就是为什么在 0.78
以上(实际上 0.8
或五分之四),strokeEnd
值的变化似乎没有任何变化;你只是在画圆的起点,重新画你已经画的圆的一部分。
你的意思可能是
startAngle: -.pi / 2.0, endAngle: 3 * .pi / 2.0
(虽然 I 会做的是从 0
到 .pi*2
并应用旋转变换以便从顶部开始绘图) .
您的代码的另一个问题可能会导致后续问题,即您忘记了为任一层提供框架。因此它们没有尺寸。