Search code examples
ioscore-graphicsgradientquartz-graphics

Why does this composite gradient look bad on iOS?

When I composite transparent linear and radial gradients in iOS using Quartz the result does not look as I expect. The screenshot shows the iOS version on the left and a Java test on the right. Interestingly if I use Core Graphics on OS X to draw the gradients they look fine (like the Java).

I am wondering if I am missing some rendering option or blending mode required to make this work or if it is a limitation of iOS.

enter image description here enter image description here The drawing is done like this:

let linearPaint = CGGradientCreateWithColors( CGColorSpaceCreateDeviceRGB(),
    [darkColor.CGColor, lightColor.CGColor], [0, 1])
CGContextSetAlpha(g, 0.3)
CGContextDrawLinearGradient(g, linearPaint, CGPointMake(x,y), CGPointMake(x,y+h), CGGradientDrawingOptions(rawValue: 0))

let radialPaint = CGGradientCreateWithColors( CGColorSpaceCreateDeviceRGB(),
    [color.CGColor, lightColorTrans.CGColor], [0, 1])
CGContextSetAlpha(g, 0.4)
CGContextDrawRadialGradient(g, radialPaint, center, 0, center, rad, CGGradientDrawingOptions(rawValue: 0))
Solution

  • As Glenn Howes pointed out in his reply kCGGradientDrawsAfterEndLocation seems to either mitigate or fix this problem. However I'm still not sure why it should matter given that the radial gradient should go to zero transparency at the end radius.