How to add multiple text to different positions on picture? - ios

Question

I'm currently making a camera app and I can add single text from the text field on picture.
What I want is, I want to put multiple different text to the picture. So I add 4 text field to the storyboard and now I need to change something on view controller. I tried something but couldn't solve.
I have tried with this code but it's not working.
func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) {
if let image = info[UIImagePickerControllerOriginalImage] as? UIImage {
ImageDisplay.image = textToImage(CustomerTextBox.text!, inImage: image, atPoint: CGPoint( x: 400, y: 100)
ImageDisplay.image = textToImage(ResponsibleTextBox.text!, inImage: image, atPoint: CGPoint( x: 400, y: 200)
ImageDisplay.image = textToImage(LocationTextBox.text!, inImage: image, atPoint: CGPoint( x: 400, y: 300)
ImageDisplay.image = textToImage(DescriptionTextBox.text!, inImage: image, atPoint: CGPoint( x: 400, y: 300)
}
dismissViewControllerAnimated(true, completion: nil)
This is my screen:
and This is my working code with single textbox:
import UIKit
class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
#IBOutlet weak var PhotoLibrary: UIButton!
#IBOutlet weak var Camera: UIButton!
#IBOutlet weak var ImageDisplay: UIImageView!
#IBOutlet weak var CustomerTextBox: UITextField!
#IBOutlet weak var ResponsibleTextBox: UITextField!
#IBOutlet weak var LocationTextBox: UITextField!
#IBOutlet weak var DescriptionTextBox: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
#IBAction func PhotoLibraryAction(sender: UIButton) {
let picker = UIImagePickerController()
picker.delegate = self
picker.sourceType = .PhotoLibrary
presentViewController(picker, animated: true, completion: nil)
}
#IBAction func CameraAction(sender: UIButton) {
let picker = UIImagePickerController()
picker.delegate = self
picker.sourceType = .Camera
presentViewController(picker, animated: true, completion: nil)
}
func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) {
if let image = info[UIImagePickerControllerOriginalImage] as? UIImage {
ImageDisplay.image = textToImage(CustomerTextBox.text!, inImage: image, atPoint: CGPoint( x: 400, y: 100))
}
dismissViewControllerAnimated(true, completion: nil)
}
func textToImage(drawText: NSString, inImage: UIImage, atPoint:CGPoint)->UIImage{
// Setup the font specific variables
let textColor: UIColor = UIColor.blackColor()
let textFont: UIFont = UIFont(name: "Helvetica Bold", size: 200)!
//Setup the image context using the passed image.
UIGraphicsBeginImageContext(inImage.size)
//Setups up the font attributes that will be later used to dictate how the text should be drawn
let textFontAttributes = [
NSFontAttributeName: textFont,
NSForegroundColorAttributeName: textColor,
]
//Put the image into a rectangle as large as the original image.
inImage.drawInRect(CGRectMake(0, 0, inImage.size.width, inImage.size.height))
// Creating a point within the space that is as bit as the image.
let rect: CGRect = CGRectMake(atPoint.x, atPoint.y, inImage.size.width, inImage.size.height)
//Now Draw the text into an image.
drawText.drawInRect(rect, withAttributes: textFontAttributes)
// Create a new image out of the images we have created
let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()
// End the context now that we have the image we need
UIGraphicsEndImageContext()
//And pass it back up to the caller.
return newImage
}
}

Answer 1

In your code you are adding the text one by one and returning the full image. The process you followed is not like draw the text in the space required for text, it wrote the text on image and return the full image.
Hence modify your method to pass all the text at a time and draw all text on image and return the full image .
I am showing you the code here where i have taken static points, you can put according to your requirement.
Here is the modified code :
func textToImage(drawText: NSString, drawText1: NSString, drawText2: NSString, drawText3: NSString, inImage: UIImage, atPoint:CGPoint, atPoint1:CGPoint, atPoint2:CGPoint, atPoint3:CGPoint)->UIImage{
// Setup the font specific variables
let textColor: UIColor = UIColor.redColor();
let textFont: UIFont = UIFont(name: "Helvetica Bold", size: 200)!
//Setup the image context using the passed image.
UIGraphicsBeginImageContext(inImage.size)
//Setups up the font attributes that will be later used to dictate how the text should be drawn
let textFontAttributes = [
NSFontAttributeName: textFont,
NSForegroundColorAttributeName: UIColor.redColor(),
]
let textFontAttributes1 = [
NSFontAttributeName: textFont,
NSForegroundColorAttributeName: UIColor.greenColor(),
]
let textFontAttributes2 = [
NSFontAttributeName: textFont,
NSForegroundColorAttributeName: UIColor.purpleColor(),
]
let textFontAttributes3 = [
NSFontAttributeName: textFont,
NSForegroundColorAttributeName: UIColor.yellowColor(),
]
//Put the image into a rectangle as large as the original image.
inImage.drawInRect(CGRectMake(0, 0, inImage.size.width, inImage.size.height))
// Creating a point within the space that is as bit as the image.
let rect: CGRect = CGRectMake(atPoint.x, atPoint.y, inImage.size.width, inImage.size.height)
//Now Draw the text into an image.
drawText.drawInRect(rect, withAttributes: textFontAttributes)
//text 1
let rect1: CGRect = CGRectMake(atPoint1.x, atPoint1.y, inImage.size.width, inImage.size.height)
drawText1.drawInRect(rect1, withAttributes: textFontAttributes1)
//text 2
let rect2: CGRect = CGRectMake(atPoint2.x, atPoint2.y, inImage.size.width, inImage.size.height)
drawText2.drawInRect(rect2, withAttributes: textFontAttributes2)
//text 3
let rect3: CGRect = CGRectMake(atPoint3.x, atPoint3.y, inImage.size.width, inImage.size.height)
drawText3.drawInRect(rect3, withAttributes: textFontAttributes3)
// Create a new image out of the images we have created
let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()
// End the context now that we have the image we need
UIGraphicsEndImageContext()
//And pass it back up to the caller.
return newImage
}
And call the method from the same place where are you doing it currently, but like this
ImageDisplay.image = textToImage(CustomerTextBox.placeholder!, drawText1: ResponsibleTextBox.placeholder!, drawText2: LocationTextBox.placeholder!, drawText3: DescriptionTextBox.placeholder!, inImage: image, atPoint: CGPoint( x: 400, y: 100), atPoint1: CGPoint( x: 600, y: 300), atPoint2: CGPoint( x: 400, y: 600), atPoint3: CGPoint( x: 600, y: 1000));
Here the points are static for test, change it according to you.
Output :
Hope it helps.
Happy coding ...