Draw a Point using NSBezierPath

Question

I want to create a single pixel-size dot. I assumed the way to do so was to draw a line using NSBezierPath with the starting point being equal to the end point (see code below) but doing so makes a completely empty window.

func drawPoint() {
    let path = NSBezierPath()
    NSColor.blue.set()
    let fromPoint = NSMakePoint(CGFloat(100) , CGFloat(100))
    let toPoint = NSMakePoint(CGFloat(100) , CGFloat(100))
    path.move(to: fromPoint)
    path.line(to: toPoint)
    path.lineWidth = 1.0
    path.stroke()
    path.fill()
}

However, if I change the toPoint coordinates from 100,100 to 101,101 (or any set of coordinates other than 100,100), a blue shape does show up. Does anyone know why this is the case?

Another issue I found is if you made toPoint's coordinates equivalent to (for instance) 101,101, then it would create a square with a length of two pixels, but also add a another pixel-length layer of blur (see image below, zoomed in for detail).

What I wish to do, however, is just put a small single blue square the size of one pixel, with no blur. Does anyone know how I can do this?

Answer 1

You have a few problems:

I want to create a single pixel-size dot.

Are you sure? What if you're on a Retina display? What if you're drawing to a PDF that will be printed on a 600 dpi laser printer?

I assumed the way to do so was to draw a line using NSBezierPath with the starting point being equal to the end point

That is a way to draw a lineWidth-sized dot, if you set the lineCap property to .round or .square. The default lineCap is .butt, which results in an empty stroke. If you set lineCap to .round or .square, you'll get a non-empty stroke.

let fromPoint = NSMakePoint(CGFloat(100) , CGFloat(100))
let toPoint = NSMakePoint(CGFloat(100) , CGFloat(100))
path.move(to: fromPoint)
path.line(to: toPoint)

You need to understand how the coordinate grid relates to pixels:

• On a non-Retina screen, integer coordinates are by default at the edges of pixels, not at the centers of pixels. A stroke along integer coordinates straddles the boundary between pixels, so (with lineWidth = 1.0) you get multiple partially-filled pixels. To fill a single pixel, you need to use coordinates that end in .5 (the center of the pixel).

• On a Retina screen, integer and half-integer coordinates are by default at the edges of pixels, not at the centers of pixels. A stroke along integer or half-integer coordinates straddles the boundary between pixels. With lineWidth = 1.0, pixels on both sides are completely filled. If you want to fill only a single pixel, you need to use coordinates that end in .25 or .75 and a lineWidth of 0.5.

• In an unscaled PDF context, a lineWidth of 1.0 nominally corresponds to 1/72 of an inch, and the number of filled pixels depends on the output device.

path.lineWidth = 1.0

This can only give you “a single pixel-size dot” on a non-Retina screen (or if you scaled the graphics context). You need to adjust it if you truly want a single pixel dot on a Retina screen. But you're better off sticking to points rather than pixels.

All that said, here's how you can create and stroke an NSBezierPath to fill one pixel:

import AppKit

func dotImage() -> CGImage {
    let gc = CGContext(data: nil, width: 20, height: 20, bitsPerComponent: 8, bytesPerRow: 0, space: CGColorSpace(name: CGColorSpace.sRGB)!, bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue)!
    let nsGc = NSGraphicsContext(cgContext: gc, flipped: false)
    NSGraphicsContext.current = nsGc; do {

        let path = NSBezierPath()
        path.move(to: .init(x: 10.5, y: 10.5))
        path.line(to: .init(x: 10.5, y: 10.5))
        path.lineWidth = 1
        path.lineCapStyle = .round
        NSColor.blue.set()
        path.stroke()

    }; NSGraphicsContext.current = nil
    return gc.makeImage()!
}

let image = dotImage()

Result:

However, you might prefer to simply fill a rectangle directly:

func dotImage2() -> CGImage {
    let gc = CGContext(data: nil, width: 20, height: 20, bitsPerComponent: 8, bytesPerRow: 0, space: CGColorSpace(name: CGColorSpace.sRGB)!, bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue)!
    let nsGc = NSGraphicsContext(cgContext: gc, flipped: false)
    NSGraphicsContext.current = nsGc; do {

        NSColor.blue.set()
        CGRect(x: 10, y: 10, width: 1, height: 1).fill()

    }; NSGraphicsContext.current = nil
    return gc.makeImage()!
}

let image2 = dotImage2()

Result:

Answer 2

On top of rob mayoff's solution, I figured out a different solution using NSGraphicsContext. I just grabbed the Core Graphics context and turned off antialiasing (see below)

 let context = NSGraphicsContext.current?.cgContext
 context?.setShouldAntialias(false)

Then, I created a path with the size of one pixel:

 context.setLineWidth(0.5)
 context.setStrokeColor(color)
 context.beginPath()
 context.move(to: CGPoint(x: 100, y: 100))
 context.addLine(to: CGPoint(x: 100.15, y: 100.15))
 context.strokePath()

When adding a endpoint to the line, I noticed that by giving it a value greater than 100, but less than 100.5, you can get exactly one pixel shaded in.

Answer 3

To draw a dot at: x, y of size: width, height.

NSBezierPath(ovalIn: CGRect(x: 5.5, y: 5.5, width: 4.0, height: 4.0)).fill()

To fine tune "pixel" placement and size, use the decimals in Double or CGFloat arguments.