coskukoz coskukoz - 2 months ago 14
Swift Question

How to Draw Line on the Taken Picture?

I want to draw white line under text after selecting/taken picture. I saw some examples but they don't work with my code so I need to ask. Basically After picture, there will be white wide line on the top of the picture. I guess I'll write drawRect in textToImage function. I'm not sure.

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 var image = info[UIImagePickerControllerOriginalImage] as? UIImage {
image = textToImage(CustomerTextBox.text!, inImage: image, atPoint: CGPoint( x: 100, y: 50))
image = textToImage(ResponsibleTextBox.text!, inImage: image, atPoint: CGPoint( x: 1000, y: 50))
image = textToImage(LocationTextBox.text!, inImage: image, atPoint: CGPoint( x: 3000, y: 50))
image = textToImage(DescriptionTextBox.text!, inImage: image, atPoint: CGPoint( x: 100, y: 200))
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: 150)!

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


}


I found something here
I'll add new function below:

func drawRect(rect: CGRect)
{
let context = UIGraphicsGetCurrentContext()
CGContextMoveToPoint(context, 100, 100)
CGContextAddLineToPoint(context, 150, 150)
CGContextAddLineToPoint(context, 100, 200)
CGContextAddLineToPoint(context, 50, 150)
CGContextAddLineToPoint(context, 100, 100)
CGContextSetFillColorWithColor(context,
UIColor.redColor().CGColor)
CGContextFillPath(context)
}


I don't know what should I write here:

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

if var image = info[UIImagePickerControllerOriginalImage] as? UIImage {
image = textToImage(CustomerTextBox.text!, inImage: image, atPoint: CGPoint( x: 100, y: 50))
image = textToImage(ResponsibleTextBox.text!, inImage: image, atPoint: CGPoint( x: 1000, y: 50))
image = textToImage(LocationTextBox.text!, inImage: image, atPoint: CGPoint( x: 3000, y: 50))
image = textToImage(DescriptionTextBox.text!, inImage: image, atPoint: CGPoint( x: 100, y: 200))
image = drawRect("WHATWILLBEHERE")
ImageDisplay.image = image
}
dismissViewControllerAnimated(true, completion: nil)
}

Answer

this works for me but i used swift 3, i think that you'll be able to convert it in swift 2

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

    if let image = info[UIImagePickerControllerOriginalImage] as? UIImage {

        ImageDisplay.image = image

        if ImageDisplay.layer.sublayers != nil {

        for layer : CALayer in ImageDisplay.layer.sublayers! {
            layer.removeFromSuperlayer()
        }
        }

        textToImage(drawText: CustomerTextBox.text!, inImage: ImageDisplay, atPoint: CGPoint(x: ImageDisplay.bounds.midX, y: ImageDisplay.bounds.midY))


    }
    dismiss(animated: true, completion: nil)


}

 func lineUnderText(myTextPosition: CGRect)  {

    let path = UIBezierPath()

    path.move(to: CGPoint(x: myTextPosition.minX, y: myTextPosition.maxY + 4))
    path.addLine(to: CGPoint(x: myTextPosition.maxX, y: myTextPosition.maxY + 4))

    let shape = CAShapeLayer()

    shape.path = path.cgPath
    shape.strokeColor = UIColor.white.cgColor
    shape.fillColor = UIColor.clear.cgColor
    shape.lineWidth = 2
    shape.lineCap = kCALineCapRound

    ImageDisplay.layer.addSublayer(shape)


        }




func textToImage(drawText: String, inImage: UIImageView, atPoint:CGPoint){

    let myLabel = UILabel()
    myLabel.text = drawText
    myLabel.textColor = UIColor.black
    myLabel.font = UIFont(name: "Helvetica Bold", size: 25)
    print(drawText.characters.count)
    let W = myLabel.intrinsicContentSize.width
    let H = myLabel.intrinsicContentSize.height
    myLabel.frame = CGRect(x: atPoint.x - W/2 , y: atPoint.y - H/2, width: W, height: 28)

   inImage.addSubview(myLabel)

    lineUnderText(myTextPosition: myLabel.frame)

}

OK Swift 2

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

    if let image = info[UIImagePickerControllerOriginalImage] as? UIImage {

        ImageDisplay.image = image

        if ImageDisplay.layer.sublayers != nil {

            for layer : CALayer in ImageDisplay.layer.sublayers! {
                layer.removeFromSuperlayer()
            }
        }

        textToImage(CustomerTextBox.text!, inImage: ImageDisplay, atPoint: CGPoint(x: ImageDisplay.bounds.midX, y: ImageDisplay.bounds.midY))


    }
    dismissViewControllerAnimated(true, completion: nil)


}

 func lineUnderText(myTextPosition: CGRect)  {

    let path = UIBezierPath()

    path.moveToPoint( CGPoint(x: myTextPosition.minX, y: myTextPosition.maxY + 4))
    path.addLineToPoint( CGPoint(x: myTextPosition.maxX, y: myTextPosition.maxY + 4))

    let shape = CAShapeLayer()

    shape.path = path.CGPath
    shape.strokeColor = UIColor.whiteColor().CGColor
    shape.fillColor = UIColor.clearColor().CGColor
    shape.lineWidth = 2
    shape.lineCap = kCALineCapRound

    ImageDisplay.layer.addSublayer(shape)


}




func textToImage(drawText: String, inImage: UIImageView, atPoint:CGPoint){

    let myLabel = UILabel()
    myLabel.text = drawText
    myLabel.textColor = UIColor.blackColor()
    myLabel.font = UIFont(name: "Helvetica Bold", size: 25)

    let W = myLabel.intrinsicContentSize().width
    let H = myLabel.intrinsicContentSize().height
    myLabel.frame = CGRect(x: atPoint.x - W/2 , y: atPoint.y - H/2, width: W, height: 28)

    inImage.addSubview(myLabel)

    lineUnderText( myLabel.frame)

}

enter image description here

I hope to have helped you

Comments