Adding text to a CGContext with Swift

5.8k views Asked by At

I am using Swift 3 / Xcode 8 on macOS.

I override draw in an NSView and, using the current context, I am able to draw simple shapes (see code):

class sample: NSImageView {

override func draw(_ dirtyRect: NSRect) {
    super.draw(dirtyRect)
    let context = NSGraphicsContext.current()?.cgContext;
    let length = CGPoint(x: 100, y: 100)
    let p1 = CGPoint(x: 200, y: 200)
    let shape = "square"


    context!.beginPath()
    context!.move(to: p1)

    if shape == "line" {
        let pointEnd = CGPoint(x: p1.x + length.x, y: p1.y + length.y)
        context!.addLine(to: pointEnd)
    } else if shape == "square" {
        let p2 = CGPoint(x: p1.x + length.x, y: p1.y)
        let p3 = CGPoint(x: p1.x + length.x, y: p1.y + length.y)
        let p4 = CGPoint(x: p1.x, y: p1.y + length.y)
        context!.addLine(to: p2)
        context!.addLine(to: p3)
        context!.addLine(to: p4)
        context!.addLine(to: p1)
    }

    context!.setStrokeColor(red: 1, green: 1, blue: 1, alpha: 1.0)
    context!.setFillColor(red: 0, green: 1, blue: 0, alpha: 1)
    context!.setLineWidth(2.0)
    context!.strokePath()

    let textColor = NSColor(calibratedRed: 1, green: 1, blue: 1, alpha: 1.0)
    let textColorB = NSColor(calibratedRed: 1, green: 1, blue: 1, alpha: 0.0)
    let rect = CGRect(x: 200, y: 200, width: 30, height: 130)
    let paragraphStyle = NSMutableParagraphStyle()
    paragraphStyle.alignment = .center
    let attr = [NSParagraphStyleAttributeName: paragraphStyle, NSForegroundColorAttributeName: textColor, NSBackgroundColorAttributeName: textColorB, NSFontAttributeName:NSFont.init(name: "HelveticaNeue-Thin", size: 14)]

    let q: NSString = "hello, world"
    let center = CGPoint(x: 0, y: 0)
    q.draw(at: center, withAttributes: attr)                                                                 
}

The above is corrected to show the entire method.

This works as expected except for the text draw. Two draws I tried are shown in the last 2 lines. The first is as suggested below and it crashes (see message in comment for that line). The second is close but it demands an NSDrawingContext, not a CGContext.

I would also like to draw some text (say right beneath the line). I have done a LOT of searching and have found nothing that works. CGContexts seems to have methods related to drawing text but none seem to actually draw it. To be clear, I found nothing that would compile, much less run.

Note: I am new to macOS development (done some iOS though). So I could be missing something very obvious.

The problem was in the color assignment in the attributes. Edited with code that now works.

1

There are 1 answers

5
matt On BEST ANSWER

The easy way to draw text into current graphics context is with NSString's draw(at:withAttributes:).

Example:

class MyView : NSView {
    override func draw(_ dirtyRect: NSRect) {
        let atts = [NSFontAttributeName:NSFont.init(name: "Georgia", size: 30)]
        ("Hello world" as NSString).draw(
             at: NSMakePoint(100,100), 
             withAttributes: atts)
    }
}

Result:

enter image description here