CGContext and retina display

Question

guys, this is my code:

- (void) renderPageAtIndex:(NSUInteger)index inContext:(CGContextRef)ctx {
    //background
    CGContextSetFillColorWithColor(ctx, [[         


        

Answer 1

Looks like you are using the Leaves project on git. I had this same issue in my project and solved it as follows.

First, you need to size and scale the original Core Graphics context created in imageForPageIndex: in LeavesCache.m according to the devices screen scale. Make sure to also scale CGContextClipToRect as well.

- (CGImageRef) imageForPageIndex:(NSUInteger)pageIndex {
    CGFloat scale = [[UIScreen mainScreen] scale];  // we need to size the graphics context according to the device scale
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = CGBitmapContextCreate(NULL, 
                                             pageSize.width*scale, 
                                             pageSize.height*scale, 
                                             8,                     /* bits per component*/
                                             pageSize.width*scale * 4,  /* bytes per row */
                                             colorSpace, 
                                             kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);

    CGColorSpaceRelease(colorSpace);
    CGContextClipToRect(context, CGRectMake(0, 0, pageSize.width*scale, pageSize.height*scale));

    CGContextScaleCTM(context, scale, scale);

    [dataSource renderPageAtIndex:pageIndex inContext:context];

    CGImageRef image = CGBitmapContextCreateImage(context);
    CGContextRelease(context);

    [UIImage imageWithCGImage:image];
    CGImageRelease(image);

    return image;
}

Next, in setUpLayers in LeavesView.m, you'll need to apply the device screen scale to each CALayer that gets initialized. As posted by Brad Larson in a similar question:

By default, your CALayer is not rendering its Quartz content at the higher resolution of the Retina display screen. You can enable this using code like the following:

layer.contentsScale = [[UIScreen mainScreen] scale];

So here are the first few lines from setUpLayers in LeavesView.m where I apply the device scale to the topPage CALayer. You'll need to do this to all CALayers and CAGradientLayers initialized in setUpLayers:

- (void) setUpLayers {
    // Set the backgound image of the leave view to the book page
    UIColor *background = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"open_book_page_turn.png"]];

    self.clipsToBounds = YES;

    topPage = [[CALayer alloc] init];
    topPage.contentsScale = [[UIScreen mainScreen] scale];  // We need to apply the device display scale to each layer
    topPage.masksToBounds = YES;
    topPage.contentsGravity = kCAGravityLeft;
    topPage.backgroundColor = [[UIColor whiteColor] CGColor];
    topPage.backgroundColor = [background CGColor];

    ...

}