Jagged edges on circular GAGradient layer

Question

I am trying to draw a circular progress bar that is filled with a gradient. My code is as follows:

    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)

    }

This works however it seems the gradient layer has jagged edges:

In the image the bottom and right edges are jagged. What am I doing wrong here?

Answer 1

Your issue is not with CAGradientLayer but with CAShapeLayer(progressCircleLayer in your code).

The rasterization property of CAShapeLayer defaults to 1 for retina devices and results in blurry images.

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