CactiApp CactiApp - 1 month ago 13
iOS Question

Drawing a rectangle under text on image Then save

I'm currently working on camera app. I have achieved to write text on image but there is a problem that sometimes it's hard to read text just because of the dark colors of the picture. So I want to draw a white rectangle under text.

Actually I found how to draw a rectangle into picture but I couldn't draw it under text and also after saving the rectangle does not appear.

MainStoryBoard Picture

The code below is for drawing rectangle:

let imageSize = CGSize(width: ImageDisplayWidthConstantSize*0.75, height: 50)
let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 20, y: 215), size: imageSize))
self.view.addSubview(imageView)
let imageBlank = drawCustomImage(imageSize)
imageView.image = imageBlank

func drawCustomImage(size: CGSize) -> UIImage {
// Setup our context
let bounds = CGRect(origin: CGPoint.zero, size: size)
let opaque = true
let scale: CGFloat = 0
UIGraphicsBeginImageContextWithOptions(size, opaque, scale)
let context = UIGraphicsGetCurrentContext()

// Setup complete, do drawing here
CGContextSetStrokeColorWithColor(context, UIColor.whiteColor().CGColor)
CGContextSetLineWidth(context, 50)

CGContextStrokeRect(context, bounds)

CGContextBeginPath(context)
CGContextMoveToPoint(context, CGRectGetMinX(bounds), CGRectGetMinY(bounds))
CGContextAddLineToPoint(context, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds))
CGContextMoveToPoint(context, CGRectGetMaxX(bounds), CGRectGetMinY(bounds))
CGContextAddLineToPoint(context, CGRectGetMinX(bounds), CGRectGetMaxY(bounds))
CGContextStrokePath(context)

// Drawing complete, retrieve the finished image and cleanup
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}


and this code is for inserting text on the picture:

func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) {

if var image = info[UIImagePickerControllerOriginalImage] as? UIImage {
let ScreenSize: CGRect = UIScreen.mainScreen().bounds
let ImageDisplayWidthConstantSize = ScreenSize.width

let imageSize = CGSize(width: ImageDisplayWidthConstantSize*0.75, height: 50)
let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 20, y: 215), size: imageSize))
self.view.addSubview(imageView)
let imageBlank = drawCustomImage(imageSize)
imageView.image = imageBlank

image = textToImage(CustomerTextBox.text!, inImage: image, atPoint: CGPoint( x: 50, y: 0)) //Customer Text Field
image = textToImage(ResponsibleTextBox.text!, inImage: image, atPoint: CGPoint( x: 1000, y: 0)) //Responsible Text Field
image = textToImage(LocationTextBox.text!, inImage: image, atPoint: CGPoint( x: 2200, y: 0)) //Location Text Field
image = textToImage(DescriptionTextBox.text!, inImage: image, atPoint: CGPoint( x: 50, y: 200)) //Description Text Field

ImageDisplay.image = image


}
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: 100)!

//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

You can use your function instead of writing new one. Just copy paste function textToImage and change its name. Then use white color with white background and change size. So you'll get white rectangular box. Here is the example of the code what I'm saying.

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

// Setup the font specific variables
let textColor: UIColor = UIColor.whiteColor()
let textFont: UIFont = UIFont(name: "Helvetica Bold", size: 400)!

//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,
    NSBackgroundColorAttributeName : UIColor.white 
    ]

//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
}

Then call this function:

image = drawRectangular("___________", inImage: image, atPoint: CGPoint( x: 50, y: 0))