Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

overlaying text on image using swift

Tags:

ios

image

swift

I am trying to overlay some text on an image using Swift and am looking at this code here: (src: How do I add text to an image in iOS Swift)

This places the text right in the center. I have been changing the values in

 var rect = CGRectMake(10,150, inImage.size.width,    
   inImage.size.height)

but I am unable to get the text to show in the lower left corner. Can someone help and show what I am missing here ?

I am adding the modified image using this line:

modImage = self.textToImage("000", inImage: UIImage(named:"thisImage.png")!, atPoint: CGPointMake(10, 400))

Below is the function...

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

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

    // Setup the image context using the passed image
    let scale = UIScreen.mainScreen().scale
    UIGraphicsBeginImageContextWithOptions(inImage.size, false, scale)

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

    // Create a point within the space that is as bit as the image
    var rect = CGRectMake(atPoint.x, atPoint.y, inImage.size.width, inImage.size.height)

    // Draw the text into an image
    drawText.drawInRect(rect, withAttributes: textFontAttributes)

    // Create a new image out of the images we have created
    var newImage = UIGraphicsGetImageFromCurrentImageContext()

    // End the context now that we have the image we need
    UIGraphicsEndImageContext()

    //Pass the image back up to the caller
    return newImage

}
like image 858
NetCod Avatar asked Sep 12 '16 19:09

NetCod


People also ask

How do I add text overlay to an image?

On the Insert tab, in the Text group, click Text Box, drag to draw a text box anywhere near the picture, and then type your text. To change the font or style of the text, highlight the text, right-click it, and then select the text formatting you want on the shortcut menu.

How do I add text to an image in IOS Swift?

For Swift 4: func textToImage(drawText text: String, inImage image: UIImage, atPoint point: CGPoint) -> UIImage { let textColor = UIColor. white let textFont = UIFont(name: "Helvetica Bold", size: 12)! let scale = UIScreen. main. scale UIGraphicsBeginImageContextWithOptions(image.

How do I overlay in SwiftUI?

As mentioned earlier, SwiftUI has a built-in modifier for applying overlay named . overlay that can be attached to the existing image view. The requirement inside an overlay modifier is to place another object that will serve as the coating of the image. Add the below modifier to the Image view.


1 Answers

Details

xCode 9.1, Swift 4

Solution

extension UIView

extension UIView {

    func copyObject<T: UIView> () -> T? {
        let archivedData = NSKeyedArchiver.archivedData(withRootObject: self)
        return NSKeyedUnarchiver.unarchiveObject(with: archivedData) as? T
    }
}

extension UIImage

 extension UIImage {

    typealias EditSubviewClosure<T: UIView> = (_ parentSize: CGSize, _ viewToAdd: T)->()

    func with<T: UIView>(view: T, editSubviewClosure: EditSubviewClosure<T>) -> UIImage {

        if let copiedView = view.copyObject() as? T {
            UIGraphicsBeginImageContext(size)

            let basicSize = CGRect(origin: .zero, size: size)
            draw(in: basicSize)
            editSubviewClosure(size, copiedView)
            copiedView.draw(basicSize)

            let newImage = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return newImage!
        }
        return self

    }
}

extension UIImageView

 extension UIImageView {

    enum ImageAddingMode {
        case changeOriginalImage
        case addSubview
        case addCopiedSubview
    }

    func drawOnCurrentImage<T: UIView>(view: T, mode: ImageAddingMode, editSubviewClosure: @escaping UIImage.EditSubviewClosure<T>) {

        guard let image = image else {
            return
        }

        let addSubView: (T) -> () = { view in
            editSubviewClosure(self.frame.size, view)
            self.addSubview(view)
        }

        switch mode {
            case .changeOriginalImage:
                self.image = image.with(view: view, editSubviewClosure: editSubviewClosure)

            case .addSubview:
                addSubView(view)

            case .addCopiedSubview:
                if let copiedView = view.copyObject() as? T {
                    addSubView(copiedView)
                }
        }
    }
}

Usage

Sample 1

func sample1(label: UILabel) {
    imageView.contentMode = .scaleAspectFit
    imageView.image = UIImage(named: "wall")?.with(view: label) { (parentSize, viewToAdd) in
        print("parentSize: \(parentSize)")
        viewToAdd.font = UIFont.systemFont(ofSize: 40)
        viewToAdd.textColor = .yellow
        viewToAdd.bounds = CGRect(x: 40, y: 40, width: 200, height: 40)
    }
}

enter image description here

Sample 2

func sample2(label: UILabel) {
    imageView.image = UIImage(named: "wall")
    imageView.contentMode = .scaleAspectFit
    imageView.drawOnCurrentImage(view: label, mode: .changeOriginalImage) { (parentSize, viewToAdd) in
        print("parentSize: \(parentSize)")
        viewToAdd.font = UIFont.systemFont(ofSize: 40)
        viewToAdd.textColor = .yellow
        viewToAdd.textAlignment = .right
        let width: CGFloat = 200
        let height: CGFloat = 30
        let indent: CGFloat = 40
        viewToAdd.bounds = CGRect(x: parentSize.width - width - indent, y: parentSize.height - height - indent, width: width, height: height)
    }
}

enter image description here

Sample 3

func sample3(label: UILabel) {
    imageView.image = UIImage(named: "wall")
    imageView.contentMode = .scaleAspectFill
    imageView.drawOnCurrentImage(view: label, mode: .addSubview) { (parentSize, viewToAdd) in
        print("parentSize: \(parentSize)")
        viewToAdd.font = UIFont.systemFont(ofSize: 16)
        viewToAdd.textColor = .yellow
        viewToAdd.frame = CGRect(x: 40, y: 40, width: 200, height: 20)
    }
}

enter image description here

Sample 4

func sample4(label: UILabel) {
    imageView.image = UIImage(named: "wall")
    imageView.contentMode = .scaleAspectFill
    imageView.drawOnCurrentImage(view: label, mode: .addCopiedSubview) { (parentSize, viewToAdd) in
        print("parentSize: \(parentSize)")
        viewToAdd.font = UIFont.systemFont(ofSize: 16)
        viewToAdd.textColor = .yellow
        viewToAdd.frame = CGRect(x: 40, y: 40, width: 200, height: 20)
    }
}

enter image description here

Full sample

Do not forget to add the solution code here

import UIKit

class ViewController: UIViewController {

    let imageView = UIImageView(frame: CGRect(x: 50, y: 50, width: 300, height: 300))

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        let label = UILabel(frame: CGRect(x: 20, y: 20, width: 80, height: 30))
        label.text = "Blablabla"
        label.font = UIFont.systemFont(ofSize: 20)
        label.textColor = .black
        view.addSubview(label)

        sample1(label: label)
        //sample2(label: label)
        //sample3(label: label)
        //sample4(label: label)

        imageView.clipsToBounds = true
        view.addSubview(imageView)
    }

    func sample1(label: UILabel) {
        imageView.contentMode = .scaleAspectFit
        imageView.image = UIImage(named: "wall")?.with(view: label) { (parentSize, viewToAdd) in
            print("parentSize: \(parentSize)")
            viewToAdd.font = UIFont.systemFont(ofSize: 40)
            viewToAdd.textColor = .yellow
            viewToAdd.bounds = CGRect(x: 40, y: 40, width: 200, height: 20)
        }
    }

    func sample2(label: UILabel) {
        imageView.image = UIImage(named: "wall")
        imageView.contentMode = .scaleAspectFit
        imageView.drawOnCurrentImage(view: label, mode: .changeOriginalImage) { (parentSize, viewToAdd) in
            print("parentSize: \(parentSize)")
            viewToAdd.font = UIFont.systemFont(ofSize: 40)
            viewToAdd.textColor = .yellow
            viewToAdd.textAlignment = .right
            let width: CGFloat = 200
            let height: CGFloat = 30
            let indent: CGFloat = 40
            viewToAdd.bounds = CGRect(x: parentSize.width - width - indent, y: parentSize.height - height - indent, width: width, height: height)
        }
    }

    func sample3(label: UILabel) {
        imageView.image = UIImage(named: "wall")
        imageView.contentMode = .scaleAspectFill
        imageView.drawOnCurrentImage(view: label, mode: .addSubview) { (parentSize, viewToAdd) in
            print("parentSize: \(parentSize)")
            viewToAdd.font = UIFont.systemFont(ofSize: 16)
            viewToAdd.textColor = .yellow
            viewToAdd.frame = CGRect(x: 40, y: 40, width: 200, height: 20)
        }
    }

    func sample4(label: UILabel) {
        imageView.image = UIImage(named: "wall")
        imageView.contentMode = .scaleAspectFill
        imageView.drawOnCurrentImage(view: label, mode: .addCopiedSubview) { (parentSize, viewToAdd) in
            print("parentSize: \(parentSize)")
            viewToAdd.font = UIFont.systemFont(ofSize: 16)
            viewToAdd.textColor = .yellow
            viewToAdd.frame = CGRect(x: 40, y: 40, width: 200, height: 20)
        }
    }
}
like image 57
Vasily Bodnarchuk Avatar answered Oct 17 '22 01:10

Vasily Bodnarchuk