Vector like drawing for zoomable UIScrollView

Question

I have a zoomable UIScrollView with some CATextLayers and simple CALayers in it. They get rendered fine but the problem is when they are zoomed they become blurry. (Even if I redraw them)

What would be my options to get my text not blurry when the view is zoomed? Should I use another thing? enable something in CATextLayer/CALayer? Any idea is welcomed ;)

I am using CALayers because, as suggested in documentation, CALayers are lighter than UIViews and I have hundreds of them. Currently it works smoothly. I have tried with UIWebView and my CALayer version is faster ;)

Thanks in advance.

Answer 1

iOS rasterizes the text before the scale-up occurs, that's why it's so blurry. You only need to fix one property of your CATextLayer, contentsScale, to get a higher quality render after zooming. Implement this UIScrollViewDelegate method:

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView
                       withView:(UIView *)view
                        atScale:(float)scale
{
    [CATransaction begin];
    [CATransaction setValue:[NSNumber numberWithBool:YES] 
                     forKey:kCATransactionDisableActions];
    uglyBlurryTextLayer.contentsScale = scale;
    [CATransaction commit];
}

This tells the layer to use more pixels to render the text, and it disables Core Animation when making that particular change.