2017-06-01 2 views
3

Ich möchte einen Text in der oberen oder unteren rechten Ecke eines UIImage zeichnen. Ich habe eine Erweiterung, die gut funktioniert, um den Text zu zeichnen, aber das Problem ist, den Text auf der rechten Seite des Bildschirms zu positionieren (weil Text geschnitten wird). HierText in Bild rechte Ecke zeichnen

ist die Erweiterung:

extension UIImage { 

func addText(drawText: NSString, atPoint: CGPoint, textColor: UIColor?, textFont: UIFont?) -> UIImage{ 

    // Setup the font specific variables 
    var _textColor: UIColor 
    if textColor == nil { 
     _textColor = UIColor.white 
    } else { 
     _textColor = textColor! 
    } 

    var _textFont: UIFont 
    if textFont == nil { 
     _textFont = UIFont.systemFont(ofSize: 50) 
    } else { 
     _textFont = textFont! 
    } 

    // Setup the image context using the passed image 
    UIGraphicsBeginImageContext(size) 

    // Setup the font attributes that will be later used to dictate how the text should be drawn 
    let textFontAttributes = [ 
     NSFontAttributeName: _textFont, 
     NSForegroundColorAttributeName: _textColor, 
     ] as [String : Any] 

    // Put the image into a rectangle as large as the original image 
    draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height)) 

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


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

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

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

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

Problem ist, wenn der Text zu lang oder zu groß, um es aus dem Bildschirm sein. Ich müsste den Ursprungspunkt ändern, um den Text von rechts nach links zu schreiben, so dass Platz nur links und nicht rechts vom Bildschirm genommen wird. Wie könnte ich das tun?

actual issue

what I want

+0

Es könnte einfacher sein, ein Label als Unteransicht hinzuzufügen und einen "sceenshot" von imageView zu erstellen. [Hier geht's] (https://stackoverflow.com/q/2214957/1457385). – shallowThought

Antwort

2

Es gibt einen einfachen Funktionsaufruf die "Bounding Box" für eine Zeichenfolge zu erhalten. Sie können, dass an Position verwenden, in denen der Text in das Bild gezogen werden:

// get the bounding-box for the string 
    let stringSize = drawText.size(attributes: textFontAttributes) 

    // position the bounding-box at the bottom-right corner of the image 
    let x = self.size.width - ceil(stringSize.width) 
    let y = self.size.height - ceil(stringSize.height) 

    let rect = CGRect(x: x, y: y, width: stringSize.width, height: stringSize.height) 

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

Beachten Sie, dass dieser Beispielcode, den Text am unteren rechten Ecke positioniert - ignoriert die atPoint Parameter. Sie würden dies wahrscheinlich in einen whichCorner Typ ändern und dann die x und y Position entsprechend berechnen.

Übrigens ... drawText ist ein schrecklicher Name für eine Variable - es klingt wie eine Funktion. Viel besser lesbar, um etwas wie textToDraw zu verwenden.


Hier ist eine modifizierte Funktion, einen atCorner Parameter verwendet, wobei die Werte sind:

 +-----------+ 
     | 0  1 | 
     |   | 
     |   | 
     | 3  2 | 
     +-----------+ 

Edit: rechtsbündig Absatzformat verwenden (wie von Thilina Chamin Hewagama) hat einige Vorteile. Diese bearbeitete Version behandelt sogar Text mit "\n" eingebetteten Zeilenumbrüchen.

extension UIImage { 

    func addText(textToDraw: NSString, atCorner: Int, textColor: UIColor?, textFont: UIFont?) -> UIImage { 

     // Setup the font specific variables 
     var _textColor: UIColor 
     if textColor == nil { 
      _textColor = UIColor.white 
     } else { 
      _textColor = textColor! 
     } 

     var _textFont: UIFont 
     if textFont == nil { 
      _textFont = UIFont.systemFont(ofSize: 50) 
     } else { 
      _textFont = textFont! 
     } 

     // Setup the image context using the passed image 
     UIGraphicsBeginImageContext(size) 

     // Put the image into a rectangle as large as the original image 
     draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height)) 

     let titleParagraphStyle = NSMutableParagraphStyle() 

     // Setup the font attributes that will be later used to dictate how the text should be drawn 
     let textFontAttributes = [ 
      NSFontAttributeName: _textFont, 
      NSForegroundColorAttributeName: _textColor, 
      NSParagraphStyleAttributeName: titleParagraphStyle 
      ] as [String : Any] 

     // get the bounding-box for the string 
     var stringSize = textToDraw.size(attributes: textFontAttributes) 

     // draw in rect functions like whole numbers 
     stringSize.width = ceil(stringSize.width) 
     stringSize.height = ceil(stringSize.height) 

     var rect = CGRect(origin: CGPoint.zero, size: self.size) 

     switch atCorner { 

     case 1: 
      // top-right 
      titleParagraphStyle.alignment = .right 

     case 2: 
      // bottom-right 
      rect.origin.y = self.size.height - stringSize.height 
      titleParagraphStyle.alignment = .right 

     case 3: 
      // bottom-left 
      rect.origin.y = self.size.height - stringSize.height 

     default: 
      // top-left 
      // don't need to change anything here 
      break 

     } 

     // Draw the text into an image 
     textToDraw.draw(in: rect, withAttributes: textFontAttributes) 

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

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

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

} 
+0

danke für die "Bounding Box" -Funktion, das ist, was ich gesucht habe. Problem gelöst ! – user3722523

+0

Hallo ich habe deine Lösung ausprobiert, die Textgröße positioniert sich an der richtigen Stelle - das ist genial. Aber die Textschriftgröße variiert basierend auf der Größe des Bildes. Ich kann vielleicht das Bild auf eine bestimmte Größe skalieren und den Text vielleicht zeichnen, der das Problem lösen würde, aber die Bildqualität würde nicht das selbe sein. Irgendwelche Vorschläge würden geschätzt. – kamyFC

+0

@kamyFC - nicht ganz sicher, was Sie fragen ... * "Die Schriftgröße des Textes hängt von der Größe des Bildes ab" * --- erstellen und übergeben Sie eine Schrift? oder einfach "default" verwenden? – DonMag

Verwandte Themen