圓形GAGradient圖層上的鋸齒狀邊緣

我正在嘗試繪製一個填充漸變的圓形進度條。我的代碼如下：圓形GAGradient圖層上的鋸齒狀邊緣

override func draw(_ rect: CGRect) { 
     let circlePath = UIBezierPath(arcCenter: CGPoint(x: rect.size.width/2.0, y: rect.size.height/2.0), radius: rect.size.height/2.0, startAngle: 0.0, endAngle: CGFloat.pi * 2.0, clockwise: true) 
     circleLayer.path = circlePath.cgPath 
     circleLayer.fillColor = UIColor.clear.cgColor 
     circleLayer.strokeColor = UIColor(hex: 0xCACACA).cgColor 
     circleLayer.lineWidth = 2.0 
     circleLayer.strokeEnd = 1.0 
     layer.addSublayer(circleLayer) 


     let circleCorrectPath = UIBezierPath(arcCenter: CGPoint(x: rect.size.width/2.0, y: rect.size.height/2.0), radius: rect.size.height/2.0, startAngle: CGFloat.pi * 3/2, endAngle: CGFloat.pi * 3/2 + CGFloat.pi * 2, clockwise: true) 
     progressCircleLayer.path = circleCorrectPath.cgPath 
     progressCircleLayer.fillColor = UIColor.clear.cgColor 
     progressCircleLayer.strokeColor = UIColor.black.cgColor 
     progressCircleLayer.lineWidth = 2.0 
     layer.addSublayer(progressCircleLayer) 

     let gradient = CAGradientLayer() 
     gradient.frame = rect 
     gradient.mask = progressCircleLayer 
     gradient.colors = [UIColor(red:0.52, green:0.83, blue:0.9, alpha:1).cgColor, 
           UIColor(red:0.25, green:0.67, blue:0.86, alpha:1).cgColor] 
     gradient.locations = [0, 1] 
     gradient.startPoint = CGPoint(x: 1, y: 0) 
     gradient.endPoint = CGPoint.zero 
     layer.addSublayer(gradient) 

    }

這工作然而似乎梯度層已經鋸齒邊緣：

在圖像的底部和右側邊緣呈鋸齒狀。我在這裏做錯了什麼？

來源

2017-09-11 Kex

是progressCircleLayer.stokeEnd 1.0的值？該圖片看起來像藍色圖層正在剪裁，circleLayer和progressCircleLayer的大小是否完全相同？ –

你的問題是不是CAGradientLayer但CAShapeLayer（progressCircleLayer在你的代碼）。

對於視網膜設備，CAShapeLayer的光柵化屬性默認爲1，並導致模糊的圖像。

progressCircleLayer.shouldRasterize = true 
progressCircleLayer.rasterizationScale = 2 * UIScreen.main.scale

來源

2017-09-11 11:36:42

我試過了。仍然沒有變化。無論如何，我在模擬器上運行它，非視網膜屏幕。 – Kex

圓形GAGradient圖層上的鋸齒狀邊緣

回答

相關問題