Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CGContext and retina display

Tags:

xcode

iphone

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?

like image 735
werbary Avatar asked Dec 17 '11 14:12

werbary


2 Answers

Try setting the layers contentScale variable like this:

layer.contentsScale = [UIScreen mainScreen].scale;

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

like image 154
Olof Avatar answered Oct 05 '22 23:10

Olof


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

    ...

}
like image 42
chazzwozzer Avatar answered Oct 06 '22 00:10

chazzwozzer