iOS: How do I support Retina Display with CGLayer?

Question

I'm drawing a graph on a CALayer in its delegate method drawLayer:inContext:.

Now I want to support Retina Display, as the graph looks blurry on the latest devices.

For the parts that I draw directly on the graphics context passed by the CALayer, I could nicely draw in high resolution by setting the CALayer's contentScale property as follows.

if ([myLayer respondsToSelector:@selector(setContentsScale:)]) {
    myLayer.contentsScale = [[UIScreen mainScreen] scale];
}

But for the parts that I use CGLayer are still drawn blurry.

How do I draw on a CGLayer in high resolution to support Retina Display?

I want to use CGLayer to draw the same plot shapes of the graph repeatedly, as well as to cut off the graph lines exceeding the edge of the layer.

I get CGLayer by CGLayerCreateWithContex with the graphics context passed from the CALayer, and draw on its context using CG functions such as CGContextFillPath or CGContextAddLineToPoint.

I need to support both iOS 4.x and iOS 3.1.3, both Retina and legacy display.

Thanks,

Kura

Answer 1

This is how to draw a CGLayer correctly for all resolutions.

1. When first creating the layer, you need to calculate the correct bounds by multiplying the dimensions with the scale:

   int width = 25; 
   int height = 25;
   float scale = [self contentScaleFactor];
   CGRect bounds = CGRectMake(0, 0, width * scale, height * scale);
   CGLayer layer = CGLayerCreateWithContext(context, bounds.size, NULL);
   CGContextRef layerContext = CGLayerGetContext(layer);
   

2. You then need to set the correct scale for your layer context:

   CGContextScaleCTM(layerContext, scale, scale);
   

3. If the current device has a retina display, all drawing made to the layer will now be drawn twice as large.

4. When you finally draw the contents of your layer, make sure you use CGContextDrawLayerInRect and supply the unscaled CGRect:

   CGRect bounds = CGRectMake(0, 0, width, height);
   CGContextDrawLayerInRect(context, bounds, layerContext);
   

That's it!

Answer 2

I decided not to use CGLayer and directly draw on the graphics context of the CALayer, and now it's drawn nicely in high resolution on retina display.

I found the similar question here, and found that there is no point of using CGLayer in my case.

I used CGLayer because of the Apple's sample program "Using Multiple CGLayer Objects to Draw a Flag" found in the Quartz 2D Programming guide. In this example, it creates one CGLayer for a star and uses it multiple times to draw 50 stars. I thought this was for a performance reason, but I didn't see any performance difference.

For the purpose of cutting off the graph lines exceeding the edge of the layer, I decided to use multiple CALayers.