Swift - how to create a non-pixelated radial gradient?

Question

I'm trying to create a radial / circular gradient for my app.

I used a solution similar to the confirmed answer here

However, the resulting gradient looks pixelated.

What am I doing wrong? Is there are more modern way or a good 3rd party framework to create smooth, simple radial gradients?

Thanks!

My code (based on snippets published on Stack Overflow):

class RadialGradientLayer: CALayer {

    init(innerColor: UIColor, outerColor: UIColor) {
        self.innerColor = innerColor.CGColor
        self.outerColor = outerColor.CGColor

        super.init()

        needsDisplayOnBoundsChange = true
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("This class does not support NSCoding")
    }

    var innerColor: CGColor
    var outerColor: CGColor

    override func drawInContext(ctx: CGContext) {
        CGContextSaveGState(ctx)

        let colorSpace = CGColorSpaceCreateDeviceRGB()

        let locations:[CGFloat] = [0.0, 1.0]
        let colors = [innerColor, outerColor]

        let gradient = CGGradientCreateWithColors(colorSpace, colors, locations)

        let center = CGPoint(x: bounds.width / 2.0, y: bounds.height / 2.0)
        let radius = min(bounds.width / 2.0, bounds.height / 2.0)

        CGContextDrawRadialGradient(ctx, gradient, center, 0.0, center, radius, CGGradientDrawingOptions(rawValue: 0))
    }

}

You need to make sure the `CGContext` is scaled for the screen - have a look at http://stackoverflow.com/questions/8545547/cgcontext-and-retina-display — RichAppz, Nov 17 '15 at 11:06
Thanks @zappiDev! That was the problem. Please publish as an answer and I'll accept it. — Hatchmaster J, Nov 17 '15 at 15:20

score 1 · Accepted Answer · edited May 23 '17 at 12:08

1

You need to make sure the CGContext is scaled for the devices screen.

Take a look at the answers to this question - CGContext and retina display

This will help you fix the issue.

edited May 23 '17 at 12:08

Community

1
1

answered Nov 17 '15 at 16:29

RichAppz

1,520
2
14
27

Swift - how to create a non-pixelated radial gradient?

1 Answers1