Adding text over an image on Xcode

问题:

I want to make an iphone application similar to some greeting cards application, where I could write text over some pre prepared background images(cards).

• How can I write this text?
• How to save the background image+the text on one image file ?

Thanks.

回答1:

Here is a method that burns a string into an image. You can tweak the font size and other parameters to configure it to your liking.

/* Creates an image with a home-grown graphics context, burns the supplied string into it. */
- (UIImage *)burnTextIntoImage:(NSString *)text :(UIImage *)img {

UIGraphicsBeginImageContext(img.size);

CGRect aRectangle = CGRectMake(0,0, img.size.width, img.size.height);
[img drawInRect:aRectangle];

[[UIColor redColor] set];           // set text color
NSInteger fontSize = 14;
if ( [text length] > 200 ) {
    fontSize = 10;
}
UIFont *font = [UIFont boldSystemFontOfSize: fontSize];     // set text font

[ text drawInRect : aRectangle                      // render the text
         withFont : font
    lineBreakMode : UILineBreakModeTailTruncation  // clip overflow from end of last line
        alignment : UITextAlignmentCenter ];

UIImage *theImage=UIGraphicsGetImageFromCurrentImageContext();   // extract the image
UIGraphicsEndImageContext();     // clean  up the context.
return theImage;
}

回答2:

Thanks Rayfleck! It worked.

To add optional compatibility with retina displays (fixes choppy letters during '@2x' version of image scale up):

replace:

UIGraphicsBeginImageContext(img.size);

with conditional:

if (UIGraphicsBeginImageContextWithOptions != NULL)
    UIGraphicsBeginImageContextWithOptions(img.size,NO,0.0);
else
    UIGraphicsBeginImageContext(img.size);

回答3:

Update for ios7...

 /* Creates an image with a home-grown graphics context, burns the supplied string into it. */
    - (UIImage *)burnTextIntoImage:(NSString *)text :(UIImage *)img {

        UIGraphicsBeginImageContext(img.size);

        CGRect aRectangle = CGRectMake(0,0, img.size.width, img.size.height);
        [img drawInRect:aRectangle];

        [[UIColor redColor] set];           // set text color
        NSInteger fontSize = 14;
        if ( [text length] > 200 ) {
            fontSize = 10;
        }

        UIFont *font = [UIFont fontWithName:@"Courier" size:fontSize];
        NSMutableParagraphStyle *paragraphStyle = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
        paragraphStyle.lineBreakMode = NSLineBreakByTruncatingTail;


        paragraphStyle.alignment = NSTextAlignmentRight;
        NSDictionary *attributes = @{ NSFontAttributeName: font,
                                      NSParagraphStyleAttributeName: paragraphStyle,
                                      NSForegroundColorAttributeName: [UIColor whiteColor]};
        [text drawInRect:aRectangle withAttributes:attributes];

        UIImage *theImage=UIGraphicsGetImageFromCurrentImageContext();   // extract the image
        UIGraphicsEndImageContext();     // clean  up the context.
        return theImage;
    }

回答4:

This approach takes in account the screen's scale and it's super intuitive

    UIImage * img = ...
    UIImageView * iV = [[UIImageView alloc] initWithImage:img];
    UILabel * l = [[UILabel alloc] initWithFrame:iV.bounds];
    l.textAlignment = ...;
    l.adjustsFontSizeToFitWidth = YES;
    l.textColor = ...;
    l.font = ...;
    l.text = ...;

    [iV addSubview:l];

    UIGraphicsBeginImageContextWithOptions(iV.bounds.size, NO, 0);
    [iV.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage * finalImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return finalImage