ios - 如何在图片的不同位置添加多个文字？

Question

我目前正在制作一个相机应用程序，我可以从图片的文本字段中添加单个文本。

我想要的是，我想在图片上放置多个不同的文字。所以我在 Storyboard中添加了 4 个文本字段，现在我需要在 View Controller 上更改一些内容。我尝试了一些但无法解决。

我试过这段代码，但它不起作用。

    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)

这是我的屏幕:

这是我使用单个文本框的工作代码:

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

在您的代码中，您将逐一添加文本并返回完整图像。您遵循的过程不像在文本所需的空间中绘制文本，而是将文本写在图像上并返回完整图像。

因此修改您的方法以一次传递所有文本并在图像上绘制所有文本并返回完整图像。

我这里给你看的是我取静态点的代码，你可以根据你的要求来放置。

修改后的代码:

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
}

然后从你当前正在做的同一个地方调用这个方法，但是像这样

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));

这里的点都是静态的，测试用的，自己改吧。

输出:

希望对您有所帮助。

快乐编码......