Rotate Text in Swift - ios

I am trying to draw a few strings in a custom view with swift. I have done the same thing on Android with Java, and here's the result:
With Swift, I get this graphic:
Here's my code:
let π:CGFloat = CGFloat(M_PI)
extension NSString {
func drawWithBasePoint(basePoint: CGPoint, andAngle angle: CGFloat, andAttributes attributes: [String: AnyObject]) {
let textSize: CGSize = self.sizeWithAttributes(attributes)
let context: CGContextRef = UIGraphicsGetCurrentContext()!
let t: CGAffineTransform = CGAffineTransformMakeTranslation(basePoint.x, basePoint.y)
let r: CGAffineTransform = CGAffineTransformMakeRotation(angle)
CGContextConcatCTM(context, t)
CGContextConcatCTM(context, r)
self.drawAtPoint(CGPointMake(textSize.width / 2, -textSize.height / 2), withAttributes: attributes)
CGContextConcatCTM(context, CGAffineTransformInvert(r))
CGContextConcatCTM(context, CGAffineTransformInvert(t))
}
}
override func drawRect(rect: CGRect) {
elements = delegate!.getRotaryElements(self)
let center = CGPoint(x:bounds.width / 2, y: bounds.height / 2)
let sectorSize = 2 * π / CGFloat.init(elements.count)
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = NSTextAlignment.Center
for i in 0...elements.count - 1 {
let attrs = [NSFontAttributeName: UIFont(name: "HelveticaNeue-Thin", size: 14)!, NSParagraphStyleAttributeName: paragraphStyle, NSForegroundColorAttributeName:(i % 2 == 0 ? UIColor.redColor():primaryColor)]
elements[i].drawWithBasePoint(center, andAngle: CGFloat(i) * sectorSize + (sectorSize / 2), andAttributes: attrs)
}
}
How can I produce the same thing in Swift? I am new to Swift (and iOS for that matter) and would appreciate any hint you can give me.

Try the code below, and to see if it works.
let π:CGFloat = CGFloat(M_PI)
extension NSString {
func drawWithBasePoint(basePoint: CGPoint, andAngle angle: CGFloat, andAttributes attributes: [String: AnyObject]) {
let radius: CGFloat = 100
let textSize: CGSize = self.sizeWithAttributes(attributes)
let context: CGContextRef = UIGraphicsGetCurrentContext()!
let t: CGAffineTransform = CGAffineTransformMakeTranslation(basePoint.x, basePoint.y)
let r: CGAffineTransform = CGAffineTransformMakeRotation(angle)
CGContextConcatCTM(context, t)
CGContextConcatCTM(context, r)
self.drawAtPoint(CGPointMake(radius-textSize.width/2, -textSize.height/2), withAttributes: attributes)
CGContextConcatCTM(context, CGAffineTransformInvert(r))
CGContextConcatCTM(context, CGAffineTransformInvert(t))
}
}

In Swift 5.0:
extension String {
func drawWithBasePoint(basePoint: CGPoint,
andAngle angle: CGFloat,
andAttributes attributes: [NSAttributedString.Key : Any]) {
let textSize: CGSize = self.size(withAttributes: attributes)
let context: CGContext = UIGraphicsGetCurrentContext()!
let t: CGAffineTransform = CGAffineTransform(translationX: basePoint.x, y: basePoint.y)
let r: CGAffineTransform = CGAffineTransform(rotationAngle: angle)
context.concatenate(t)
context.concatenate(r)
self.draw(at: CGPoint(x: textSize.width / 2, y: -textSize.height / 2), withAttributes: attributes)
context.concatenate(r.inverted())
context.concatenate(t.inverted())
}
}

Related

Drawing on an image & implementing AspectFill for CGRect. Can it be done?

The following image is a screen grab from an iPad 9.7 simulator, showing the circles overlayed on an underlying live preview. (The live camera view is not there because it's on the Simulator)
On any sort of iPhone the circles clip off at the screen edges, but on the iPad you can see the clipping. I'm sure this is an AspectFit or AspectFill problem but I can't find a solution. Somehow, the code isn't seeing the correct iPad screen size?
This is the code that does it. Firstly the call, then the functions. It all works fine, except for that clipping...
//=======================================
// draw the circles on the image then return
imgOverlay.image = self.drawCirclesOnImage(fromImage: nil, targetSize: imgOverlay.bounds.size)
and now we have the two functions that draw the circles.
func getImageWithColor(color: UIColor, size: CGSize) -> UIImage {
let rect = CGRect(origin: CGPoint(x: 0, y: 0), size: CGSize(width: screenWidth, height: screenHeight))
UIGraphicsBeginImageContextWithOptions(size, false, 0)
color.setFill()
UIRectFill(rect)
let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
}
func drawCirclesOnImage(fromImage: UIImage? = nil, targetSize: CGSize) -> UIImage? {
if fromImage == nil && targetSize == CGSize.zero {
return nil
}
var tmpimg: UIImage?
if targetSize == CGSize.zero {
tmpimg = fromImage
} else {
tmpimg = getImageWithColor(color: UIColor.clear, size: targetSize)
}
guard let img = tmpimg else {
return nil
}
let imageSize = img.size
let scale: CGFloat = 0
UIGraphicsBeginImageContextWithOptions(imageSize, false, scale)
img.draw(at: CGPoint.zero)
let w = imageSize.width
//let w = screenWidth
let h = imageSize.height
//let h = screenHeight
print("Width 1: \(w) Height 1: \(h)")
let midX = imageSize.width / 2
let midY = imageSize.height / 2
//let midX = screenWidth / 2
//let midY = screenHeight / 2
// red circles - radius in %
let circleRads = [ 0.07, 0.13, 0.17, 0.22, 0.29, 0.36, 0.40, 0.48, 0.60, 0.75 ]
// center "dot" - radius is 1.5%
var circlePath = UIBezierPath(arcCenter: CGPoint(x: midX,y: midY), radius: CGFloat(w * 0.010), startAngle: CGFloat(0), endAngle:CGFloat(Double.pi * 2), clockwise: true)
UIColor.white.setFill()
circlePath.stroke()
circlePath.fill()
lineColor = getLineColor(color: color)
lineColor?.setStroke()
for pct in circleRads {
let rad = w * CGFloat(pct)
circlePath = UIBezierPath(arcCenter: CGPoint(x: midX, y: midY), radius: CGFloat(rad), startAngle: CGFloat(0), endAngle:CGFloat(Double.pi * 2), clockwise: true)
circlePath.lineWidth = 2.5
circlePath.stroke()
}
// draw text time stamp on image
let now = Date()
let formatter = DateFormatter()
formatter.timeZone = TimeZone.current
formatter.dateFormat = "yyyy-MM-dd HH:mm"
let dateString = formatter.string(from: now)
// print(dateString)
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = .center
let attrs = [NSAttributedStringKey.font: UIFont(name: "HelveticaNeue-Thin", size: 26)!, NSAttributedStringKey.paragraphStyle: paragraphStyle]
let string = dateString
string.draw(with: CGRect(x: 12, y: 38, width: 448, height: 448), options: .usesLineFragmentOrigin, attributes: attrs, context: nil)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage
}

NPGradientImage - Issues with Swift 3

Im using https://github.com/nestorpopko/NPGradientImage-Swift for my Label to give gradient effect. While converting my code to Swift 3 I'm facing many issues with UIImage+Gradient.swift file. Can anyone help me to fix it....?
Finally i've fixed the Issues with swift3 and Its working fine. Just Replace the UIImage+Gradient.swift with the below code
import UIKit
public extension UIImage
{
static func gradientImage(colors: [UIColor], locations: [CGFloat], size: CGSize, horizontal: Bool = false) -> UIImage {
let endPoint = horizontal ? CGPoint(x: 1.0, y: 0.0) : CGPoint(x: 0.0, y: 1.0)
return gradientImage(colors: colors, locations: locations, startPoint: CGPoint.zero, endPoint: endPoint, size: size)
}
static func gradientImage(colors: [UIColor], locations: [CGFloat], startPoint: CGPoint, endPoint: CGPoint, size: CGSize) -> UIImage
{
UIGraphicsBeginImageContext(size)
let context = UIGraphicsGetCurrentContext()
UIGraphicsPushContext(context!);
let components = colors.reduce([]) { (currentResult: [CGFloat], currentColor: UIColor) -> [CGFloat] in
var result = currentResult
let numberOfComponents = currentColor.cgColor.numberOfComponents
let components = currentColor.cgColor.components
if numberOfComponents == 2
{
result += ([(components?[0])!, (components?[0])!, (components?[0])!, (components?[1])!])
}
else
{
result += ([(components?[0])!, (components?[1])!, (components?[2])!, (components?[3])!])
}
return result
}
let gradient = CGGradient(colorSpace: CGColorSpaceCreateDeviceRGB(), colorComponents: components, locations: locations, count: colors.count);
let transformedStartPoint = CGPoint(x: startPoint.x * size.width, y: startPoint.y * size.height)
let transformedEndPoint = CGPoint(x: endPoint.x * size.width, y: endPoint.y * size.height)
context?.drawLinearGradient(gradient!, start: transformedStartPoint, end: transformedEndPoint, options: []);
UIGraphicsPopContext();
let gradientImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return gradientImage!
}
}

Core Text Rotation does not properly rotate - Swift

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

How to Rotate Core Text with Swift?

I am attempting to make an analog clock using CoreGraphics.
My problem is that I do not know how to rotate the text of the numerals.
The general process of the code is as follows:
First I rotate the context, then, if applicable I draw a number; repeat.
The complete Playground
import UIKit
import Foundation
import XCPlayground
class ClockFace: UIView {
func drawText(context: CGContextRef, text: NSString, attributes: [String: AnyObject], x: CGFloat, y: 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)
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))
CGContextMoveToPoint(ctx, 72, 0)
if (i % 5 == 0) {
nums++
drawText(ctx!, text: "\(nums)", attributes: [NSForegroundColorAttributeName : UIColor.blackColor().CGColor, NSFontAttributeName : UIFont.systemFontOfSize(12)], x: 42, y: 0)
}
CGContextRestoreGState(ctx)
}
}
}
let myView = ClockFace(frame: CGRectMake(0, 0, 150, 150))
myView.backgroundColor = .lightGrayColor()
XCPShowView("", view: myView)
Hence my question, how does one rotate Core Text with Swift?
These 15 lines took me over 8 hours, gobs of StackOverflow searches (many with answers that didn't/no long work!), to figure out.
Beware of solutions that use CTLineDraw. For CTLineDraw, you have to change cgContext.textMatrix to do the rotation and I got very strange/unreliable results. Generating a frame and then rotating that frame proved MUCH more reliable.
Using Swift 5.2...
func drawCenteredString(
cgContext: CGContext,
string: String,
targetCenter: CGPoint,
angleClockwise: Angle,
uiFont: UIFont
) {
let attrString = NSAttributedString(string: string, attributes: [NSAttributedString.Key.font: uiFont])
let textSize = attrString.size()
let textPath = CGPath(rect: CGRect(x: CGFloat(-textSize.width/2), y: -uiFont.ascender / 2, width: ceil(textSize.width), height: ceil(textSize.height)), transform: nil)
let frameSetter = CTFramesetterCreateWithAttributedString(attrString)
let frame = CTFramesetterCreateFrame(frameSetter, CFRange(location: 0, length: attrString.length), textPath, nil)
cgContext.saveGState()
cgContext.translateBy(x: targetCenter.x, y: targetCenter.y)
cgContext.scaleBy(x: 1, y: -1)
cgContext.rotate(by: CGFloat(-angleClockwise.radians))
CTFrameDraw(frame, cgContext)
cgContext.restoreGState()
}
You can implement CGAffineTransform via CGContextSetTextMatrix() to rotate texts. Ex:
...
let frame = CTFramesetterCreateFrame(frameSetter, CFRange(location: 0, length: attributedString.length), textPath, nil)
CGContextSetTextMatrix(context, CGAffineTransformMakeRotation(CGFloat(M_PI)))
CTFrameDraw(frame, context)

How to Rotate Core Text in Swift?

So I have the following code that rotates the CGContext to position where my text should be:
var nums: Int = 0
let oNums: [Int] = [3,4,5,6,7,8,9,10,11,12,1,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))
CGContextSetStrokeColorWithColor(ctx, UIColor.grayColor().CGColor)
CGContextMoveToPoint(ctx, 72, 0)
CGContextSetLineWidth(ctx, 3.0)
CGContextAddLineToPoint(ctx, 42, 0)
drawText(ctx!, text: getRoman(oNums[nums]), attributes: [NSForegroundColorAttributeName : UIColor.blackColor().CGColor, NSFontAttributeName : UIFont.systemFontOfSize(12)], x: 42, y: 0, align: CGFloat(6.0 * Double(i) * M_PI / 180))
nums++
}
Where drawText(_:) is:
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)
CTFrameDraw(frame, context)
return textSize
}
And getRoman(_:) is:
func getRoman(numeral: Int) -> String {switch numeral {case 1:return "I"case 2:return "II"case 3:return "III"case 4:return "IV"case 5:return "V"case 6:return "VI"case 7:return "VII"case 8:return "VIII"case 9:return "IX"case 10:return "X"case 11:return "XI"case 12:return "XII"default:return ""}}
The issue, is that this prints text rotated to an angle (the desired result would be text all angled to the same degree (standard text orientation))
Is there a way to rotate Core Text?
Regards, Brandon

Resources