iOS - CATiledLayer renderInContext: results in distorted image

Question

I have a CATiledLayer-backed UIScrollView which displays a really big image. What I would like to achieve is to capture this view into an UIImage (to use it as background for a progress bar view). There are several problems:

• at "100%" zoom (the whole picture is visible) it seems ok
• if I zoom in the scrollview, some of the tiles become distorted (scale and/or offset is bad)
• tried to repro it with Apple's PhotoScroller sample, which almost works, except that captured images are pixelated sometimes
• I did not write the code, so I have no idea how to fix it

Checked the other stackoverflow entries regarding this, but they were not much of a help...

Code of the image capture:

CGRect rect = [view bounds];
UIImage* img = nil;

if ([view isKindOfClass:[UIScrollView class]])
{
    UIScrollView* scrollview = (UIScrollView*)view;
    CGPoint contentOffset = scrollview.contentOffset;

    UIGraphicsBeginImageContextWithOptions(rect.size, view.opaque, 0.0);
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGContextTranslateCTM(ctx, -contentOffset.x, -contentOffset.y);
    [view.layer renderInContext:ctx];

    img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
}

And the code of the tiled view's drawRect: method:

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();

    if (self.clipContent)
    {
        CGContextSaveGState(context);
        CGFloat color[4] = {1.0, 1.0f, 1.0f, 1.0f};
        CGContextSetFillColor(context, color);
        CGContextFillRect(context, self.bounds);

        CGRect clips[] = {
            CGRectMake(self.bounds.size.width / 2.0, 0,
                       self.bounds.size.height / 2.0 , self.bounds.size.width / 2.0)
        };

        CGContextClipToRects(context, clips, sizeof(clips) / sizeof(clips[0]));
    }

    CGFloat scale = CGContextGetCTM(context).a;
    CGSize tileSize = [_dataSource tileSize];

    double width = (double)tileSize.width / (double)scale;//pow(2.0, (int)log2(scale));
    double height = (double)tileSize.height / (double)scale;//pow(2.0, (int)log2(scale));

    int firstCol = floorf(CGRectGetMinX(rect) / width);
    int lastCol = floorf((CGRectGetMaxX(rect) - 1) / width);
    int firstRow = floorf(CGRectGetMinY(rect) / height);
    int lastRow = floorf((CGRectGetMaxY(rect) - 1) / height);

    for (int row = firstRow; row <= lastRow; row++) {
        for (int col = firstCol; col <= lastCol; col++) {
            UIImage* tileImage = [_dataSource tileForScale:scale row:row col:col];

            CGRect tileRect = CGRectMake(width * col, height * row, width, height);
            tileRect = CGRectIntersection(rect, tileRect);

            [tileImage drawInRect:tileRect];
        }
    }

    if (self.clipContent)
        CGContextRestoreGState(context);
}

Any ideas?

Answer 1

After a lot of trial and error, it turned out that the Cocoa implementation itself is incomplete, so the problem cannot be solved.

With the release of iOS 7 there is a new method though:

[view drawViewHierarchyInRect:rect afterScreenUpdates:YES];

(instead of renderInContext), and it works (the image is somewhat blurry, but thats an acceptable side effect).