圆形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图层上的锯齿状边缘

回答

相关问题