0

I want to add a text on an image, and I'm able to do it as shown in below code. 

func textToImage(drawText: NSString, inImage: UIImage, atPoint:CGPoint)->UIImage{

    // Setup the font specific variables
    var textColor: UIColor = UIColor.redColor()
    var textFont: UIFont =  UIFont(name: "AmericanTypewriter", size: 75)!
    let textStyle  = NSTextEffectLetterpressStyle

    //Setup the image context using the passed image.
    UIGraphicsBeginImageContext(inImage.size)

    let textFontAttributes = [
        NSFontAttributeName: textFont,
        NSForegroundColorAttributeName: textColor,
        NSTextEffectAttributeName : textStyle
    ]

    inImage.drawInRect(CGRectMake(0, 0, inImage.size.width, inImage.size.height))

    var rect: CGRect = CGRectMake(atPoint.x, atPoint.y, inImage.size.width, inImage.size.height)

    drawText.drawInRect(rect, withAttributes: textFontAttributes)

    var newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()

    UIGraphicsEndImageContext()
    return newImage
}

I called this function like shown below

let newImage : UIImage = textToImage(textToAdd!, inImage: imageToSave, atPoint:CGPoint(x: 20, y: 20)) //For now text is displaying at the top in left end for point(x:20 ,y:20)

But the problem is, text is taken by user. They can give either single word or big sentence. So if they give only single word, it should appear in top and middle of the image or else in top from left to right. it is more like, I want to set the text alignment to centre. To achieve it, Accordingly I should change the CGPoint given above. But I'm not getting how to change it so that it should look good in all scenarios. Please help me how to achieve this.

Pruthvi Hariharan
  • 551
  • 1
  • 6
  • 23

3 Answers3

4

You can center the text near the top of the image like this:

    func textToImage(drawText: NSString, inImage: UIImage, atPoint:CGPoint)->UIImage{

    // Setup the font specific variables
    var textColor: UIColor = UIColor.redColor()
    var textFont: UIFont =  UIFont(name: "AmericanTypewriter", size: 75)!
    let textStyle  = NSTextEffectLetterpressStyle

    //Setup the image context using the passed image.
    UIGraphicsBeginImageContext(inImage.size)

    let textFontAttributes = [
        NSFontAttributeName: textFont,
        NSForegroundColorAttributeName: textColor,
        NSTextEffectAttributeName : textStyle
    ]

    inImage.drawInRect(CGRectMake(0, 0, inImage.size.width, inImage.size.height))

    let textSize = drawText.sizeWithAttributes(textFontAttributes)
    let textRect = CGRectMake(inImage.size.width / 2 - textSize.width / 2, 0,
        inImage.size.width / 2 + textSize.width / 2, inImage.size.height - textSize.height)
    drawText.drawInRect(textRect, withAttributes: textFontAttributes)

    var newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()

    UIGraphicsEndImageContext()
    return newImage
}
osteven
  • 766
  • 7
  • 4
  • Hi Osteven, It works if it is a single line or font size is small. If I give long sentence, text size is becoming more since the value of x-coordinate becoming negative. So text is hiding. Can you please let me know what else can be done to resolve this.. – Pruthvi Hariharan Jun 03 '15 at 21:08
  • You could try restricting the size of the textRect: `let left = min(abs(inImage.size.width / 2 - textSize.width) / 2, 4) let right = min(inImage.size.width / 2 + textSize.width / 2, inImage.size.width) let textRect = CGRectMake(left, 0, right, inImage.size.height)` – osteven Jun 03 '15 at 22:35
  • I tried that, but text not appearing in centre.. But anyhow we can put condition and set accordingly right as shown in my answer? Is it bad coding? – Pruthvi Hariharan Jun 03 '15 at 22:53
  • To center it, you can add this after let textStyle ==... `let paraStyle = NSMutableParagraphStyle.defaultParagraphStyle().mutableCopy() as! NSMutableParagraphStyle paraStyle.alignment = NSTextAlignment.Center ` Then add this to the textFontAttributes array: `NSParagraphStyleAttributeName: paraStyle ` – osteven Jun 03 '15 at 23:26
  • This worked for me. I was looking for a way to insert an integer value in the middle of a circle. I had to update the textRect as follows to get that to work: let textRect = CGRect(inImage.size.width / 2 - textSize.width / 2, inImage.size.height/2 - textSize.height/2, inImage.size.width / 2 + textSize.width / 2, inImage.size.height - textSize.height) – Cathal Jan 19 '17 at 10:44
1

Added to @osteven answer. Below code works as I expected. Hope it helps others.

 func textToImage(drawText: NSString, inImage: UIImage, atPoint:CGPoint)->UIImage{

// Setup the font specific variables
var textColor: UIColor = UIColor.redColor()
var textFont: UIFont =  UIFont(name: "AmericanTypewriter", size: 75)!
let textStyle  = NSTextEffectLetterpressStyle

//Setup the image context using the passed image.
UIGraphicsBeginImageContext(inImage.size)

let textFontAttributes = [
    NSFontAttributeName: textFont,
    NSForegroundColorAttributeName: textColor,
    NSTextEffectAttributeName : textStyle
]

inImage.drawInRect(CGRectMake(0, 0, inImage.size.width, inImage.size.height))

 let textSize = drawText.sizeWithAttributes(textFontAttributes)
    if textSize.width < inImage.size.width {
        println("lesser")
        let textRect = CGRectMake(inImage.size.width / 2 - textSize.width / 2, 0,
        inImage.size.width / 2 + textSize.width / 2, inImage.size.height - textSize.height)
        drawText.drawInRect(textRect, withAttributes: textFontAttributes)
    }
    else {
        println("greater")
        let textRect = CGRectMake(0 , 0,
            inImage.size.width, inImage.size.height)
        drawText.drawInRect(textRect, withAttributes: textFontAttributes)

    }

var newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()

UIGraphicsEndImageContext()
return newImage
Pruthvi Hariharan
  • 551
  • 1
  • 6
  • 23
0

It may be a simple as what you suggested with "I want to set the text alignment to centre".

Add a line here:

// Setup the font specific variables
var textColor: UIColor = UIColor.redColor()
var textFont: UIFont =  UIFont(name: "AmericanTypewriter", size: 75)!
let textStyle  = NSTextEffectLetterpressStyle
let textAlignment = NSTextAlignment.Center

and add to your array:

let textFontAttributes = [
    NSFontAttributeName: textFont,
    NSForegroundColorAttributeName: textColor,
    NSTextEffectAttributeName : textStyle
    NSTextAlignment: textAlignment
]

This should make the text centered in the image.

If you change the point of text origin back to (0, 0) and set your Text Rectangle as big as the image, it should be able to account for the width of Rect and thus center all of the text accordingly.

PDice30
  • 219
  • 1
  • 6