Swift - playground - main graphics / main text / user view

Question

Question

I am trying to create a custom UIView component on a fast playground. I was able to figure out how to do everything except the text rendering correctly. I'm not sure if I should do this through Core Graphics or Core Text or exactly how to make it work correctly.

As you can see in the image below, I want to display the text both upside down and right-side up on either side of my custom view component

I tried various ways to get the text to work, but I always get aground. If someone can show me how to change my playground to add some text images that would be awesome.

Playground Code

// Playground - noun: a place where people can play import Foundation import UIKit class RunwayView : UIView { var northText : String? var southText : String? ///Draws the "runway" override func drawRect(rect: CGRect) { // Setup graphics context var ctx = UIGraphicsGetCurrentContext() // clear context CGContextClearRect(ctx, rect) let parentVieBounds = self.bounds let width = CGRectGetWidth(parentVieBounds) let height = CGRectGetHeight(parentVieBounds) // Setup the heights let endZoneHeight : CGFloat = 40 /* Remember y is negative and 0,0 is upper left*/ //Create EndZones CGContextSetRGBFillColor(ctx, 0.8, 0.8, 0.8, 1) CGContextFillRect(ctx, CGRectMake(0, 0, width, endZoneHeight)) CGContextFillRect(ctx, CGRectMake(0, height-endZoneHeight, width, endZoneHeight)) var northString = NSMutableAttributedString(string: "36") var attrs = [NSFontAttributeName : UIFont.systemFontOfSize(16.0)] var gString = NSMutableAttributedString(string:"g", attributes:attrs); var line = CTLineCreateWithAttributedString(gString) CGContextSetTextPosition(ctx, 10, 50); CTLineDraw(line, ctx); // Clean up } } var outerFrame : UIView = UIView(frame: CGRectMake(20,20,400,400)) var runway1 : RunwayView = RunwayView(frame: CGRectMake(0,0,30,260)) var runway2 : RunwayView = RunwayView(frame: CGRectMake(80,0,30,340)) runway1.transform = CGAffineTransformConcat(CGAffineTransformMakeTranslation(20, 200), CGAffineTransformMakeRotation(-0.785398163)) outerFrame.addSubview(runway1) runway2.transform = CGAffineTransformConcat(CGAffineTransformMakeTranslation(120, 140), CGAffineTransformMakeRotation(-0.585398163)) outerFrame.addSubview(runway2) outerFrame.backgroundColor = UIColor.yellowColor() outerFrame.clipsToBounds = true // View these elements runway1 outerFrame runway1 

Answer 1

I wrote a utility function for my application to draw text using CoreText . It returns the size of the text for further processing:

 func drawText(context: CGContextRef, text: NSString, attributes: [String: AnyObject], x: CGFloat, y: CGFloat) -> CGSize { let font = attributes[NSFontAttributeName] as UIFont let attributedString = NSAttributedString(string: text, attributes: attributes) let textSize = text.sizeWithAttributes(attributes) // y: Add font.descender (its a negative value) to align the text at the baseline let textPath = CGPathCreateWithRect(CGRect(x: x, y: y + font.descender, width: ceil(textSize.width), height: ceil(textSize.height)), nil) let frameSetter = CTFramesetterCreateWithAttributedString(attributedString) let frame = CTFramesetterCreateFrame(frameSetter, CFRange(location: 0, length: attributedString.length), textPath, nil) CTFrameDraw(frame, context) return textSize } 

Call it like this:

 var textAttributes: [String: AnyObject] = [ NSForegroundColorAttributeName : UIColor(white: 1.0, alpha: 1.0).CGColor, NSFontAttributeName : UIFont.systemFontOfSize(17) ] drawText(ctx, text: "Hello, World!", attributes: textAttributes, x: 50, y: 50) 

Hope this helps.