Draw text at 90 degree on NSImage

Question

I have the following code to draw text on an image.How can i draw the text inclined at 90 degree

let textStyle = NSMutableParagraphStyle.default.mutableCopy() as! NSMutableParagraphStyle
        let textFontAttributes = [
            NSAttributedStringKey.font: font,
            NSAttributedStringKey.foregroundColor: textcolor,
            NSAttributedStringKey.paragraphStyle: textStyle

        ]
text.draw(in: textRect, withAttributes: textFontAttributes)

did you see this answer? https://stackoverflow.com/questions/10289898/drawing-rotated-text-with-nsstring-drawinrect — Russell, May 05 '20 at 15:23

score 2 · Accepted Answer · answered May 05 '20 at 16:47

Here is demo of approach with calculable location

class DemoView: NSView {
    override func draw(_ rect: NSRect) {

        // .. your drawing code here

        NSColor.red.set()  // just for demo
        rect.fill()        // just for demo

        if let context = NSGraphicsContext.current?.cgContext {
            context.saveGState()

            let text: NSString = "Hello World"
            let attributes = [
                NSAttributedString.Key.foregroundColor: NSColor.white, 
                NSAttributedString.Key.font: NSFont.systemFont(ofSize: 24)
            ]

            let size = text.size(withAttributes: attributes)
            context.translateBy(x: size.height, y: (rect.height - size.width) / 2)
            context.rotate(by: CGFloat.pi / 2)

            text.draw(at: .zero, withAttributes: attributes)

            context.restoreGState()
        }
    }
}

Thanks... how can i draw the text at the right side in the same manner? — techno, May 07 '20 at 15:33
To achieve right side placement,I have changed the translation x coordinate,but this produces an unwanted spacing.Please see https://stackoverflow.com/questions/61676256/drawing-text-on-right-side-of-nsimage-unwanted-spacing — techno, May 08 '20 at 12:21

score 1 · Answer 2 · answered May 05 '20 at 16:43

I have found a nice simple approach - but you will have to play with the co-ordinates a bit. The transformation moves the origin to the bottom-left corner

Most of the answer came from an earlier answer - How to rotate text in NSView? (Mac OS, Cocoa, Swift), but it needed a bit of updating.

    override func draw(_ dirtyRect: NSRect) {
    super.draw(dirtyRect)

    let font = NSFont.boldSystemFont(ofSize: 18)
    let textStyle = NSMutableParagraphStyle.default.mutableCopy() as! NSMutableParagraphStyle
    let textFontAttributes = [
        NSAttributedString.Key.font: font,
        NSAttributedString.Key.foregroundColor: NSColor.red,
        NSAttributedString.Key.paragraphStyle: textStyle
    ]

    let textRect = CGRect(x: 200, y: 200   , width: 200, height: 100)
    "normal".draw(in: textRect, withAttributes: textFontAttributes)

    let transf : NSAffineTransform = NSAffineTransform()
    transf.rotate(byDegrees: 90)
    transf.concat()
    "200, -100".draw(at: NSMakePoint(200, -100), withAttributes:textFontAttributes)
    "300, -50".draw(at: NSMakePoint(300, -50), withAttributes:textFontAttributes)

    }

Here's my output

I have upvoted your answer.. but the other answer seems much simpler.I will accept that.Thanks for your help — techno, May 07 '20 at 15:16

Draw text at 90 degree on NSImage

2 Answers2