iOS: Draw NSString and border on UIImage

Question

I am wanting to draw an NSString and a border onto a UIImage that I already have. I found a method that will draw an NSString as a UIImage, but I need it to draw on an image that I provide.

-(UIImage *)imageFromText:(NSString *)text
{
    // set the font type and size
    UIFont *font = [UIFont systemFontOfSize:20.0];  
    CGSize size  = [text sizeWithFont:font];

    // check if UIGraphicsBeginImageContextWithOptions is available (iOS is 4.0+)
    if (UIGraphicsBeginImageContextWithOptions != NULL)
        UIGraphicsBeginImageContextWithOptions(size,NO,0.0);
    else
        // iOS is < 4.0 
        UIGraphicsBeginImageContext(size);

    // optional: add a shadow, to avoid clipping the shadow you should make the context size bigger 
    //
    // CGContextRef ctx = UIGraphicsGetCurrentContext();
    // CGContextSetShadowWithColor(ctx, CGSizeMake(1.0, 1.0), 5.0, [[UIColor grayColor] CGColor]);

    // draw in context, you can use also drawInRect:withFont:
    [text drawAtPoint:CGPointMake(0.0, 0.0) withFont:font];

    // transfer image
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();    

    return image;
}

How would I modify this method to provide my own background image, as well as adding a border?

score 5 · Accepted Answer · edited May 23 '17 at 10:34

If you are displaying the UIImage in a UIImageView you can set the UIImageView.layer.delegate and use something like:

- (void) drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
  CGContextSetFillColorWithColor(ctx, [[UIColor darkTextColor] CGColor]);

  UIGraphicsPushContext(ctx);

  [word drawAtPoint:CGPointMake(30.0f, 30.0f) 
           forWidth:200.0f 
           withFont:[UIFont boldSystemFontOfSize:32] 
      lineBreakMode:UILineBreakModeClip];

  UIGraphicsPopContext();
}

Code from Add text to CALayer

The border is easy, just use the CALayer properties:

imageview.layer.borderColor = [UIColor blackColor].CGColor;
imageview.sublayer.borderWidth = 2.0;

great, but finally I use the UIButton to replace the UIImage, It has a background Image, and also can add Label.text on it. — meadlai, Nov 12 '12 at 08:50

score 1 · Answer 2 · answered May 11 '12 at 07:24

Use this function to Draw NSString and border on UIImage
For border check CGContextSetRGBStrokeColor

-(UIImage *)imageFromText:(NSString *)text
{
// set the font type and size
UIFont *font = [UIFont systemFontOfSize:20.0];  
CGSize size  = [text sizeWithFont:font];

// check if UIGraphicsBeginImageContextWithOptions is available (iOS is 4.0+)
if (UIGraphicsBeginImageContextWithOptions != NULL)
    UIGraphicsBeginImageContextWithOptions(size,NO,0.0);
else
    // iOS is < 4.0 
    UIGraphicsBeginImageContext(size);

// optional: add a shadow, to avoid clipping the shadow you should make the context size bigger 
//
 CGContextRef ctx = UIGraphicsGetCurrentContext();
 CGContextSetShadowWithColor(ctx, CGSizeMake(1.0, 1.0), 5.0, [[UIColor brownColor] CGColor]);

// draw in context, you can use also drawInRect:withFont:
[text drawAtPoint:CGPointMake(0.0, 0.0) withFont:font];

//CGImageRef cimg = UIGraphicsGetCurrentContext();    

// transfer image
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height); 
[image drawInRect:rect blendMode:kCGBlendModeNormal alpha:1.0];

//CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(ctx, 2.0, 3.5, 5.0, 1.0);
CGContextStrokeRect(ctx, rect);
UIImage *testImg = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();    

return testImg;
}

Please help get better responses by asking better questions: http://stackoverflow.com/questions/how-to-ask — Kevin Bedell, May 12 '12 at 01:41

score 1 · Answer 3 · answered Oct 18 '11 at 17:04

1

You are looking for CALayers.

Here is very good tutorial how to create and use them.

So basically you will add new CALayer with image as a background and then draw on it text.

http://www.raywenderlich.com/2502/introduction-to-calayers-tutorial

answered Oct 18 '11 at 17:04

Amar Kulo

1,098
8
18

iOS: Draw NSString and border on UIImage

3 Answers3

Linked