Core Text Rotation does not properly rotate - Swift - ios

Question

I am attempting to rotate Core Text such that it is readable despite it being generated via a rotated context.
My issue is that regardless of the rotation method, the resulting text is not what is expected.
Here is the working playground:
import Foundation
import UIKit
import XCPlayground
class ClockFace: UIView {
func drawText(context: CGContextRef, text: NSString, attributes: [String: AnyObject], x: CGFloat, y: CGFloat, align: CGFloat) -> CGSize {
CGContextTranslateCTM(context, 0, 0)
CGContextScaleCTM(context, 1, -1)
let font = attributes[NSFontAttributeName] as! UIFont
let attributedString = NSAttributedString(string: text as String, attributes: attributes)
let textSize = text.sizeWithAttributes(attributes)
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)
CGContextSetTextMatrix(context, CGAffineTransformMakeRotation(align * 43.0))
CTFrameDraw(frame, context)
return textSize
}
override func drawRect(rect: CGRect) {
let ctx: CGContext? = UIGraphicsGetCurrentContext()
var nums: Int = 0
for i in 0..<60 {
CGContextSaveGState(ctx)
CGContextTranslateCTM(ctx, rect.width / 2, rect.height / 2)
CGContextRotateCTM(ctx, CGFloat(6.0 * Double(i) * M_PI / 180))
if (i % 5 == 0) {
nums++
drawText(ctx!, text: "\(nums)", attributes: [NSForegroundColorAttributeName : UIColor.blackColor().CGColor, NSFontAttributeName : UIFont.systemFontOfSize(12)], x: 42, y: 0, align: CGFloat(6.0 * Double(i) * M_PI / 180))
}
CGContextRestoreGState(ctx)
}
}
}
let myView = ClockFace(frame: CGRectMake(0, 0, 150, 150))
myView.backgroundColor = .lightGrayColor()
XCPShowView("", view: myView)
Regardless of the value in CGAffineTransfomMakeRotation the text is illegible.
Why is this? Am I rotating the text correctly?
Regards, Brandon

Answer 1

I draw a clock face based on your codes but revised little bit.
Basically what I did is to flip and move whole clock face outside the for-loop. You can see I moved CGContextTranslateCTM() and CGContextScaleCTM() from drawText() to drawRect(). Others are some minor calculation changes owing to above modification.
As to CGContextSetTextMatrix(), the rotation happens here is affecting each character but not whole string. You can comment line 19 & 20 and uncomment line 21 to have a different result and see what I mean.
Also if you would like to get the playground file directly, you can download it from here.
import Foundation
import UIKit
import XCPlayground
class ClockFace: UIView {
func drawText(context: CGContextRef, text: String, attributes: [String: AnyObject], x: CGFloat, y: CGFloat, align: CGFloat) -> CGSize {
let font = attributes[NSFontAttributeName] as! UIFont
let attributedString = NSAttributedString(string: text, attributes: attributes)
let textSize = text.sizeWithAttributes(attributes)
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)
var transform = CGAffineTransformMakeTranslation(x + 10, y + font.descender)
transform = CGAffineTransformRotate(transform, align)
//CGContextSetTextMatrix(context, CGAffineTransformMakeRotation(align))
CGContextConcatCTM(context, transform);
CTFrameDraw(frame, context)
return textSize
}
override func drawRect(rect: CGRect) {
let ctx: CGContext? = UIGraphicsGetCurrentContext()
CGContextTranslateCTM(ctx, -45, rect.size.height + 5)
CGContextScaleCTM(ctx, 1, -1)
var nums: Int = 2
for i in 0..<60 {
CGContextSaveGState(ctx)
CGContextTranslateCTM(ctx, rect.width / 2, rect.height / 2)
CGContextRotateCTM(ctx, CGFloat(-6.0 * Double(i) * M_PI / 180))
if (i % 5 == 0) {
nums++
nums = nums > 12 ? nums - 12 : nums
drawText(ctx!, text: "\(nums)", attributes: [NSForegroundColorAttributeName : UIColor.whiteColor(), NSFontAttributeName : UIFont.systemFontOfSize(12)], x: 42, y: 0, align: CGFloat(6.0 * Double(i) * M_PI / 180))
}
CGContextRestoreGState(ctx)
}
}
}
let view = ClockFace(frame: CGRectMake(0, 0, 150, 150))
XCPlaygroundPage.currentPage.needsIndefiniteExecution = true
XCPlaygroundPage.currentPage.liveView = view