Question

Generate PDF from UIView by rendering looses quality iOS

I have a custom UIView called TTT_WantsToBeRazorSharpView.
This view does nothing, but draw a text with

NSString*txtPleaseHelp = NSLocalizedString(@"Hello, am I blurry again?",@"");
CGContextShowTextAtPoint(ctx, 10, 50, [txtPleaseHelp cStringUsingEncoding:NSMacOSRomanStringEncoding], [txtPleaseHelp length]);

Now the View is drawn three times to an UIViewController (one time in IB) and two times in code with these lines (compare to image below):

 TTT_WantsToBeRazorSharpView *customViewSharp = [[TTT_WantsToBeRazorSharpView alloc] initWithFrame:CGRectMake(10,250, 300, 80)];
 [self.view addSubview:customViewSharp];

 TTT_WantsToBeRazorSharpView *customViewBlurryButIKnowWhy = [[TTT_WantsToBeRazorSharpView alloc] initWithFrame:CGRectMake(361.5, 251.5, 301.5, 80.5)];
 [self.view addSubview:customViewBlurryButIKnowWhy];

the first code drawn view is razorsharp, while the second isn’t, but that is ok, because of rect’s comma values (361.5, 251.5, 301.5, 80.5).

See this picture:

But my problem is now, if I render the view into an pdf document it is blurry!
And don’t know why, see here:

and the PDF file itself Test.pdf
https://raw.github.com/florianbachmann/GeneratePDFfromUIViewButDontWantToLooseQuality/master/Test.pdf

and the lines to render the view into the pdf:

//this is blurry, but why? it can't be the comma coordinates
CGRect customFrame1 = CGRectMake(10,50, 300, 80);
TTT_WantsToBeRazorSharpView *customViewSharp = [[TTT_WantsToBeRazorSharpView alloc] initWithFrame:customFrame1];
CGContextSaveGState(context);
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CGContextTranslateCTM(context, (int)customFrame1.origin.x, (int)customFrame1.origin.y);
[customViewSharp.layer renderInContext:context];
CGContextRestoreGState(context);

So why is the renderInContext:context text blurry?

I appreciate all your hints and help, I even made an GitHub project for the brave of you (with source): https://github.com/florianbachmann/GeneratePDFfromUIViewButDontWantToLooseQuality

Answer 1

Try this:

- (void)initValues {
    UIColor *gray = [UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.3f];
    CALayer *l = [self layer];
    l.masksToBounds = YES;
    l.cornerRadius = 10.0f;
    l.borderWidth = 3.0f;
    self.backgroundColor = gray;
    l.backgroundColor = gray.CGColor;
    l.borderColor = gray.CGColor;
}

- (void)drawRect:(CGRect)rect {
    NSLog(@"TTT_WantsToBeRazorSharpView drawRect[%3.2f,%3.2f][%3.2f,%3.2f]",rect.origin.x,rect.origin.y,rect.size.width,rect.size.height);

    // get the graphic context
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextSetShouldSmoothFonts(ctx,YES);

    CGColorRef colorWhite = CGColorRetain([UIColor redColor].CGColor);

    CGContextSetFillColorWithColor(ctx, colorWhite);

    CGContextSelectFont(ctx, "Helvetica-Bold", 24, kCGEncodingMacRoman);
    CGAffineTransform tranformer = CGAffineTransformMakeScale(1.0, -1.0);
    CGContextSetTextMatrix(ctx, tranformer);

    //why is this sucker blurry?
    NSString*txtPleaseHelp = NSLocalizedString(@"Hello, am I blurry again?",@"");
    CGContextShowTextAtPoint(ctx, 10, 50, [txtPleaseHelp cStringUsingEncoding:NSMacOSRomanStringEncoding], [txtPleaseHelp length]);
    CGColorRelease(colorWhite);
}

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {

    if (!layer.shouldRasterize && !CGRectIsEmpty(UIGraphicsGetPDFContextBounds())) {
        [self drawRect:self.bounds];
    }
    else {
        [super drawLayer:layer inContext:ctx];
    }
}

I had to change the text color to red to make it visible. Because the text is written first, then the transparent grey button is placed over it, it would make the white text disappear. When adding the drawLayer method, everything that does not need to be rasterized is written as vector to pdf, making the text also selectable.