IOS drawing text in the center of shapes

Question

I'm trying to draw text in the center of the shapes in iOS, an example would be the Microsoft Office paste form: https://www.dropbox.com/s/cgqyyuvy6hcv5g8/Screenshot%202014-01-21%2013.48.17.png

I have an array of coordinates that are used to form a shape that is great for creating the actual shape.

My first tactic followed this stackoverflow question: The main text with an asymmetric figure on iOS , however I can only get it to draw the text at the bottom of the form. Is there a way to center the text vertically and horizontally?

Then I looked at the new TextKit, but I was stuck on how to subclass NSTextContainer to accept a CGPath or an array of coordinates to create a text container for drawing inside.

My backup solution is to use Core Text to draw the text in the center coordinate of the shape, however this will cause the text to be drawn out of shape on some shapes, such as a right triangle.

Alternatively, are there any other methods that can be used to get some text in the center of the figure?

Thanks,

Danielle

Answer 1

I cherry from these answers and from related questions - none of them were really satisfactory - and came up with this simple solution:

UIGraphicsBeginImageContext(CGSize.init(width: imageWidth, height: imageHeight)) let string = "ABC" as NSString let attributes = [ NSFontAttributeName : UIFont.systemFontOfSize(40), NSForegroundColorAttributeName : UIColor.redColor() ] // Get the width and height that the text will occupy. let stringSize = string.sizeWithAttributes(attributes) // Center a rect inside of the image // by going half the difference to the right and down. string.drawInRect( CGRectMake( (imageWidth - stringSize.width) / 2, (imageHeight - stringSize.height) / 2, stringSize.width, stringSize.height ), withAttributes: attributes ) let newImage = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() 

Result (no matter the color):

Answer 2

This is a bit complicated. First you need to create a context. (bounds.size - image size)

 UIGraphicsBeginImageContext(bounds.size); CGContextRef context = UIGraphicsGetCurrentContext(); 

Then get the text bounding box: (the font is the font you want to use)

 CGSize textSize = [yourText sizeWithAttributes:@{NSFontAttributeName:font}]; 

draw text in context (x and y mark the center of the image)

 [yourText drawAtPoint:CGPointMake(x, y) withAttributes:@{NSFontAttributeName:font}]; 

Get image

 UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); 

Target Image Context

 UIGraphicsEndImageContext(); 

I have not tested it, but this is the way to go.

Answer 3

Swift 3 Version response Luca Davanzo

 struct UIUtility { static func imageWithColor(color: UIColor, circular: Bool) -> UIImage? { let size: CGFloat = circular ? 100 : 1; let rect = CGRect(x: 0.0, y: 0.0, width: size, height: size) UIGraphicsBeginImageContext(rect.size) if let context = UIGraphicsGetCurrentContext() { context.setFillColor(color.cgColor) if(circular) { context.fillEllipse(in: rect) } else { context.fill(rect) } let image = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return image } return nil } static func drawText(text: NSString, font: UIFont, image: UIImage, point: CGPoint, textColor: UIColor = UIColor.white) -> UIImage? { UIGraphicsBeginImageContext(image.size) image.draw(in: CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height)) let rect = CGRect(x: point.x, y: point.y, width: image.size.width, height: image.size.height) text.draw(in: rect.integral, withAttributes: [ NSFontAttributeName: font, NSForegroundColorAttributeName: textColor ]) let newImage = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return newImage } static func circleImageWithText(text: String, font: UIFont, circleColor: UIColor, textColor: UIColor = UIColor.white) -> UIImage? { if let image = UIUtility.imageWithColor(color: circleColor, circular: true) { let textSize = NSString(string: text).size(attributes: [ NSFontAttributeName: font]) let centerX = ((image.size.width) / 2.0) - (textSize.width / 2.0) let centerY = ((image.size.height) / 2.0) - (textSize.height / 2.0) let middlePoint = CGPoint(x: centerX, y: centerY) return UIUtility.drawText(text: text as NSString, font: font, image: image, point: middlePoint) } return nil } } 

Answer 4

Swift 2.0 .

My goal is to draw a circular shape with the center inside.

 struct UIUtility { static func imageWithColor(color: UIColor, circular : Bool) -> UIImage { let size : CGFloat = circular ? 100 : 1; let rect = CGRectMake(0.0, 0.0, size, size) UIGraphicsBeginImageContext(rect.size) let context = UIGraphicsGetCurrentContext() CGContextSetFillColorWithColor(context, color.CGColor) if(circular) { CGContextFillEllipseInRect(context, rect) } else { CGContextFillRect(context, rect) } let image = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return image } static func drawText(text: NSString, font: UIFont, image: UIImage, point: CGPoint, textColor: UIColor = UIColor.whiteColor()) -> UIImage { UIGraphicsBeginImageContext(image.size) image.drawInRect(CGRectMake(0, 0, image.size.width, image.size.height)) let rect = CGRectMake(point.x, point.y, image.size.width, image.size.height) text.drawInRect(CGRectIntegral(rect), withAttributes: [ NSFontAttributeName: font, NSForegroundColorAttributeName : textColor ]) let newImage = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return newImage } static func circleImageWithText(text text: String, font: UIFont, circleColor: UIColor, textColor: UIColor = UIColor.whiteColor()) -> UIImage { let image = UIUtility.imageWithColor(circleColor, circular: true) let textSize = NSString(string: text).sizeWithAttributes([ NSFontAttributeName: font]) let centerX = (image.size.width / 2.0) - (textSize.width / 2.0) let centerY = (image.size.height / 2.0) - (textSize.height / 2.0) let middlePoint = CGPointMake(centerX, centerY) return UIUtility.drawText(text, font: font, image: image, point: middlePoint) } 

}

Using this utility, we can easily create an image this way:

 let font = UIFont() let image = UIUtility.circleImageWithText(text: "Center text", font: font, circleColor: UIColor.blackColor())