How to make sure draw operations are pixel aligned on Mac?

1.2k views Asked by At

In recent iOS techtalk, I heard a suggestion about "make sure your draw operations are pixel aligned".

Is this a valid suggestion for Mac/iOS drawing performance?

Another question is how I can determine my code is drawing with pixel aligned?
Is there any tools or tricks can help?

2

There are 2 answers

3
sosborn On

Pixel alignment doesn't have anything to do with performance, but with the quality of the rendered graphics.

The best way to explain it is to show a little bit of code:

//Assume this is drawing in a rect such as a button or other NSView
NSBezierPath *line = [NSBezierPath bezierPath];
[line moveToPoint:NSMakePoint(0,0)];
[line lineToPoint:NSMakePoint(200,0)];
[[NSColor redColor] set];
[line stroke];

If you try out this code you will see a red line. If you look closely the line will not be very sharp - the red will be washed out and the width will look like it is about 2 pixels wide. The reason for this is that drawing in Cocoa uses points, not pixels. The result is that the line is being drawn between two pixels. (For more information please read through the cocoa drawing guide in the docs.)

Now, if we make a couple of simple changes...

//Assume this is drawing in a rect such as a button or other NSView
NSBezierPath *line = [NSBezierPath bezierPath];
[line moveToPoint:NSMakePoint(0,0.5)];
[line lineToPoint:NSMakePoint(200,0.5)];
[[NSColor redColor] set];
[line stroke];

Execute this code and you will see the output you probably originally intended.

There is a lot that can be said about this but essentially offset your points by 0.5 and you should be OK.

0
Jay On

With OS X 10.7+ you'd want to also use backingAlignedRect:options: to produce a "..backing store pixel aligned rectangle in window coordinates.".