2017-09-11 8 views
1

グラデーションで塗りつぶされた円形のプログレスバーを描画しようとしています。次のように私のコードは次のとおりです。円形のグラジエントレイヤーのギザギザのエッジ

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) 

    } 

これは、しかし、勾配層はギザギザがあると思われる作品:画像で

enter image description here

下と右のエッジがギザギザしています。私はここで間違って何をしていますか?

+0

progressCircleLayer.stokeEnd 1.0の値はありますか?青のレイヤーがクリップされているような画像も表示されます。circleLayerとprogressCircleLayerのサイズはまったく同じですか? –

答えて

1

問題はCAGradientLayerではなく、CAShapeLayer(コード内にprogressCircleLayer)と表示されます。

網膜デバイスの場合、CAShapeLayerのラスタライズプロパティはデフォルトで1になり、ぼやけた画像になります。

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

これを試しました。まだ変更はありません。私はとにかくシミュレータ上で、非網膜の画面を実行しています。 – Kex

関連する問題