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!