iOS: How to draw a 1 pixel line correctly

[[140291]]

1. Point Vs Pixel

In iOS, when we use frameworks such as Quartz, UIKit, and CoreAnimation, all coordinate systems are measured in Point. The system will help us process the conversion from Point to Pixel when actually rendering to the settings.

The advantage of doing this is that it isolates changes, that is, we don't need to pay attention to whether the current device is Retina after layout, and we can directly layout according to a set of coordinate systems.

In actual use, we need to keep the following in mind:

 One point does not necessarily correspond to one physical pixel.

A 1-point line is one pixel on a non-Retina screen, but may be 2 or 3 on a Retina screen, depending on the DPI of the system device.

In the iOS system, UIScreen, UIView, UIImage, and CALayer classes all provide related properties to obtain the scale factor.

Native drawing technology naturally helps us handle the scale factor. For example, in the drawRect: method, UIKit automatically sets the tangent scale factor based on the current running device. So anything we draw in the drawRect: method will be automatically scaled to the physical screen of the device.

Based on the above information, we can see that in most cases we don’t need to pay attention to pixels, but there are some cases where we need to consider pixel conversion.

For example, draw a 1-pixel dividing line

When you see this problem, your first thought may be to directly calculate the Point corresponding to the 1 pixel line according to the current screen zoom factor, and then set the line width.

The code is as follows:

 1.0f/[UIScreen mainScreen].scale

On the surface, everything seems normal, but through actual device testing you will find that the rendered line width is not 1 pixel.

Why?

In order to achieve good visual effects, the graphics system usually uses a technology called "antialiasing", and iOS is no exception.

The display screen is composed of many small display units, which can be simply understood as one unit representing one pixel. If you want to draw a black line, and the line happens to fall within a column or row of display units, a standard one-pixel black line will be rendered.

But if the line falls in the middle of two rows or columns, then you get a "distorted" line, which is actually a two-pixel wide gray line.

As shown in the following figure:

 Positions defined by whole-numbered points fall at the midpoint between pixels.
 For example, if you draw a one-pixel-wide vertical line from (1.0, 1.0) to (1.0, 10.0),
 you get a fuzzy gray line. If you draw a two-pixel-wide line,
 you get a solid black line because it fully covers two pixels (one on either side of the specified point).
 As a rule, lines that are an odd number of physical pixels wide appear softer than lines with widths
 measured in even numbers of physical pixels unless you adjust their position to make them cover pixels fully.

The official explanation is as above, a simple translation:

 Rules: Lines with odd pixel widths will appear as lines with soft widths extending upward to integer widths when rendered.
 Unless you manually adjust the position of the line so that the line falls exactly within a row or column of display cells.

How to align it?

 On a low-resolution display (with a scale factor of 1.0), a one-point-wide line
 is one pixel wide. To avoid antialiasing when you draw a one-point-wide horizontal or vertical line,
 if the line is an odd number of pixels in width, you must offset the position by 0.5 points to
 either side of a whole-numbered position. If the line is an even number of points in width,
 to avoid a fuzzy line, you must not do so.
 On a high-resolution display (with a scale factor of 2.0), a line that is one point wide is
 not antialiased at all because it occupies two full pixels (from -0.5 to +0.5).
 To draw a line that covers only a single physical pixel, you would need to make it 0.5 points in thickness and offset its position by 0.25 points. A comparison between the two types of screens is shown in Figure 1-4.

Translate

As shown in the following figure:

After reading the above explanation, we understand the cause of 1-pixel wide line distortion and the solution.

So far, the problem seems to be solved? Think again why the adjustment value is different on non-Retina and Retina screens, 0.5Point on the former and 0.25Point on the latter, so how much should the 6 Plus device with a scale of 3 be adjusted?

To answer this question, we need to understand the principles of how much adjustment to make.

Let's look back at the picture above. Each grid in the picture represents a pixel, and the mark on the top is the coordinate code of our layout.

As you can see on the left side of the non-Retina screen, when we want to draw a one-pixel-wide vertical line at (3,0), since the smallest unit of rendering is a pixel, and the coordinate (3,0) is exactly between two pixels, the system will fill the two columns of pixels on the left and right of coordinate 3. In order to prevent the line from appearing too wide, the color of the line is faded. Based on the above information, we can conclude that if we want to draw a one-pixel-wide line, we have to move the drawing coordinates to (2.5, 0) or (3.5,0), so that the system can fill a column of pixels when rendering, which is a standard one-pixel line.

Based on the above analysis, we can conclude that if the "6 Plus with Scale 3" device wants to draw a line with a width of 1 pixel, the position adjustment should also be 0.5 pixels. The corresponding Point calculation is as follows:

 ( 1 .0f / [UIScreen mainScreen].scale) / 2 ;

Here is a macro for drawing a pixel line:

 #define SINGLE_LINE_WIDTH ( 1 / [UIScreen mainScreen].scale)
 #define SINGLE_LINE_ADJUST_OFFSET (( 1 / [UIScreen mainScreen].scale) / 2 )

The usage code is as follows:

 CGFloat xPos = 5 ;
 UIView *view = [[UIView alloc] initWithFrame:CGrect(x - SINGLE_LINE_ADJUST_OFFSET, 0 , SINGLE_LINE_WIDTH, 100 )];

#p#

2. Correctly draw Grid lines

Here is a GridView code I wrote. The code offsets the odd pixels of the Grid lines to prevent blurred lines.

SvGridView.h

 //  
 // SvGridView.h  
 // SvSinglePixel  
 //  
 // Created by xiaoyong.cxy on 6/23/15.  
 // Copyright (c) 2015 smileEvday. All rights reserved.  
 //  
 # import   @interface SvGridView : UIView
 /**
 * @brief grid spacing, default 30
 */  
 @property (nonatomic, assign) CGFloat gridSpacing;
 /**
 * @brief grid line width, default is 1 pixel (1.0f / [UIScreen mainScreen].scale)
 */  
 @property (nonatomic, assign) CGFloat gridLineWidth;
 /**
 * @brief grid color, default blue
 */  
 @property (nonatomic, strong) UIColor *gridColor;
 @end  

SvGridView.m

 //  
 // SvGridView.m  
 // SvSinglePixel  
 //  
 // Created by xiaoyong.cxy on 6/23/15.  
 // Copyright (c) 2015 smileEvday. All rights reserved.  
 //  
 # import   "SvGridView.h"  
 #define SINGLE_LINE_WIDTH ( 1 / [UIScreen mainScreen].scale)
 #define SINGLE_LINE_ADJUST_OFFSET (( 1 / [UIScreen mainScreen].scale) / 2 )
 @implementation SvGridView
 @synthesize gridColor = _gridColor;
 @synthesize gridSpacing = _gridSpacing;
 - (instancetype)initWithFrame:(CGRect)frame
 {
    self = [ super initWithFrame:frame];
 if (self) {
        self.backgroundColor = [UIColor clearColor]; 
          
        _gridColor = [UIColor blueColor];
        _gridLineWidth = SINGLE_LINE_WIDTH;
 _gridSpacing = 30 ;
 } 
      
 return self;
 }
 - ( void )setGridColor:(UIColor *)gridColor
 {
 _gridColor = gridColor; 
      
 [self setNeedsDisplay];
 }
 - ( void )setGridSpacing:(CGFloat)gridSpacing
 {
    _gridSpacing = gridSpacing; 
      
 [self setNeedsDisplay];
 }
 - ( void )setGridLineWidth:(CGFloat)gridLineWidth
 {
    _gridLineWidth = gridLineWidth; 
      
 [self setNeedsDisplay];
 }
 // Only override drawRect: if you perform custom drawing.  
 // An empty implementation adversely affects performance during animation.  
 - ( void )drawRect:(CGRect)rect
 {
    CGContextRef context = UIGraphicsGetCurrentContext(); 
      
    CGContextBeginPath(context);
    CGFloat lineMargin = self.gridSpacing; 
      
 /**
     * https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html
 * The drawing position needs to be adjusted only when the line width to be drawn is an odd number of pixels
 */  
    CGFloat pixelAdjustOffset = 0 ;
 if ((( int )(self.gridLineWidth * [UIScreen mainScreen].scale) + 1 ) % 2 == 0 ) {
        pixelAdjustOffset = SINGLE_LINE_ADJUST_OFFSET;
 } 
      
    CGFloat xPos = lineMargin - pixelAdjustOffset;
    CGFloat yPos = lineMargin - pixelAdjustOffset;
 while (xPos < self.bounds.size.width) {
        CGContextMoveToPoint(context, xPos, 0 );
        CGContextAddLineToPoint(context, xPos, self.bounds.size.height);
 xPos += lineMargin;
 } 
      
 while (yPos < self.bounds.size.height) {
        CGContextMoveToPoint(context, 0 , yPos);
        CGContextAddLineToPoint(context, self.bounds.size.width, yPos);
 yPos += lineMargin;
 } 
      
    CGContextSetLineWidth(context, self.gridLineWidth);
    CGContextSetStrokeColorWithColor(context, self.gridColor.CGColor);
    CGContextStrokePath(context);
 }
 @end  

Here’s how to use it:

 SvGridView *gridView = [[SvGridView alloc] initWithFrame:self.view.bounds];
 gridView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
 gridView.alpha = 0.6 ;
 gridView.gridColor = [UIColor greenColor];
 [self.view addSubview:gridView];

3. A question

Okay, that's the end of this article, but I still have a question.

Why do designers need one pixel line?

A one-pixel line may look appropriate on a non-Retina device, but may appear thinner on a Retina screen. Whether a one-pixel line is necessary depends on the situation.