CGContext and retina display

Question

guys, this is my code:

- (void) renderPageAtIndex:(NSUInteger)index inContext:(CGContextRef)ctx {
    //background
    CGContextSetFillColorWithColor(ctx, [[UIColor colorWithRed:((float)238 / 255.0f) green:((float)233 / 255.0f) blue:((float)215 / 255.0f) alpha:1] CGColor]);
    CGContextFillRect(ctx, CGRectInset(leavesView.bounds, 0, 0));
    //text
    CGContextSetTextDrawingMode(ctx, kCGTextFill);
    CGContextSetTextMatrix(ctx, CGAffineTransformMake(1.0, 0.0, 0.0, 1.0, 0.0, 0.0));
    CGContextSetFillColorWithColor(ctx, [[UIColor blackColor] CGColor]);
    UIGraphicsPushContext(ctx);

    CGContextSaveGState(ctx);
    CGContextTranslateCTM(ctx, 0.1f, leavesView.bounds.size.height);
    CGContextScaleCTM(ctx, 1.0f, -1.0f);

    CGRect textRect = CGRectMake(5, 5, leavesView.bounds.size.width-10, leavesView.bounds.size.height-10);
    if (pages.count > 0 && pages.count-1 >= index) {
        [[pages objectAtIndex:index] drawInRect:textRect withFont:font lineBreakMode:UILineBreakModeWordWrap alignment:UITextAlignmentLeft];
    }

    CGContextRestoreGState(ctx);

    UIGraphicsPopContext();
}

It works perfect on iPhone 2G, 3G, 3GS, but on new models I have problems.

On the retina text is drawn not to double the resolution, as in the standard.

Have you any ideas?

score 16 · Answer 1 · answered Jan 07 '12 at 00:59

16

Try setting the layers contentScale variable like this:

layer.contentsScale = [UIScreen mainScreen].scale;

This should make the code adapt to retina/nonretina displays.

answered Jan 07 '12 at 00:59

Olof

5,348
4
25
27

I have subclassed the CALayer and I had to do this in the init method. In the drawWithContext method it was throwing a readonly error. – Chase Roberts Aug 26 '15 at 23:01

score 3 · Answer 2 · edited May 23 '17 at 11:48

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];

    ...

}

topPage.contentsScale = [[UIScreen mainScreen] scale]; did not help, still looked pixelated... — Yaroslav Dukal, Jul 17 '18 at 22:21

score 2 · Answer 3 · answered Sep 22 '15 at 11:09

You can just set the scale when you start the context

+ (UIImage *)imageWithView:(UIView *)view {
    UIGraphicsBeginImageContextWithOptions([view bounds].size, NO, [[UIScreen mainScreen] scale]);

    [[view layer] renderInContext:UIGraphicsGetCurrentContext()];

    UIImage *result = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return result;
}

score 0 · Answer 4 · answered Oct 14 '16 at 07:00

For Swift 3

func getImageFromContext() -> UIImage{

    UIGraphicsBeginImageContextWithOptions(self.frame.size, false, UIScreen.main.scale)
    self.drawHierarchy(in: self.bounds, afterScreenUpdates: true)
    self.layer.render(in: UIGraphicsGetCurrentContext()!)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return image!
}

CGContext and retina display

4 Answers4

Linked