一、前言

事情的起因是这样的，因为需求的原因，有一个页面的cell分割线需要自定义，于是我的同事很顺其自然地用了个view，并将其高度设为1，来作为cell分割线使用。一切看起来都那么平静，直到有一天，产品大大的出现，打破了所有的宁静。他，一个带有血轮眼的男人，看出了高度为1的线与系统cell分割线的不同。如果他要是看了这篇文章的话，他就应该能明白我说的那句话的含义。3倍屏上高度为1的线与高度为1像素的线差别只是在2个像素的粗细，基本上已经超出了肉眼的识别能力。他，是一个传奇，一个可以与水哥抗衡的真汉子

~.png

好吧，言归正传，下面就来分析下高度为1的view线与系统cell分割线的区别在哪儿吧。在此之前先要搞懂下面这两坨东西。

二、Point与Pixel

2.1 Point与Pixel的概念

先来说下Pixel，翻译过来就是像素，屏幕上显示的最小单位。

Point，翻译过来就是点，是一个标准的长度单位。在编程中，frame、bounds、center等设置的坐标位置就是以point为单位。

2.2 Point与Pixel的关系

iPhone 4之前 non-retina 屏幕的设备,一个point 就代表一个像素，在此就不做过多说明。之后的retina屏幕(视网膜屏)，两者之间的关系见下表:

设备

尺寸

scale

iPhone4s

320,480

2

iPhone5/5s

320,568

2

iPhone6

375,667

2

iPhone6s

414,736

2

iPhone6plus

414,736

3

...

...

3

scale根据代码可以获取:

CGFloat scale = [UIScreen mainScreen].scale

基于以上信息可以看出，我们大部分情况下都不需要去关注pixel，然而存在部分情况需要考虑像素的转化。比如说绘制一个1像素粗细的线。

看到这个问题，第一想法就是根据当前屏幕的缩放因子scale计算出1像素线对应的点，然后将其设置成线的粗细即可。

没错，我当时就这么干了。代码写完，编译运行发现在设备上有的线并没有显示出来。

我在万能的互联网上找到了原因：

为了获得良好的视觉效果，绘图系统通常都会采用一个叫antialiasing(反锯齿)的技术，iOS也不例外。显示屏幕有很多个显示单元(即像素)组成，如果要画一条黑线，这条线刚好落在了一列或者一行显示单位之内，将会渲染出标准的一个像素的黑线。如下图所示:

渲染出标准黑线.jpg

但是如果线落在乐两个行或列的中间时，那么会得到一条失真的线，如下图所示:

1Point的线卡在两个像素之间.jpg

官方给出的解释与解决办法是这样的

解释：

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 grey 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.

奇数像素宽度的线在渲染的时候将会表现为柔和的宽度扩展到向上的整数宽度的线，除非你手动的调整线的位置，使线刚好落在一行或列的显示单元内。

解决办法

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.

1.在non-retina屏上，一个Point对应一个像素。为了防止antialiasing导致的奇数像素的线渲染时出现失真，你需要设置偏移0.5个点。

2.在retina屏上，要绘制一个像素的线，需要设置线宽为0.5个点，同时设置偏移为0.25个点。

3.如果线宽为偶数Point的话，则不要去设置偏移，否则线条也会失真。

至此似懂非懂地貌似察觉到了解决办法，但是上面给出的解决方法需要偏移的点数也只是在二倍屏的基础上。如果为三倍屏，又该偏移多少呢？

下面就来分析下偏移量的计算。

首先设置为1Pixel的线，其所用的点为1 / [UIScreen mainScreen].scale。渲染的时候，如果我们检测到线的落点并没有完美显示在显示单元上(奇数单元点)，只需要将其移动半个单元到偶数单元点，即可使线渲染的时候躲过** antialiasing**这个门槛。

即1像素的线需要的偏移量为1 / [UIScreen mainScreen].scale/2

三、核心代码

下面贴上绘制1像素线的核心代码：

- (void)drawRect:(CGRect)rect

{

[super drawRect:rect];

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextBeginPath(context);

CGFloat pixelAdjustOffset = 0;

// 落在奇数位置的显示单元上

if (((int)(1* [UIScreen mainScreen].scale) + 1) % 2 == 0)

{

pixelAdjustOffset = SINGLE_LINE_ADJUST_OFFSET;

}

// 设置画线y值

CGFloat yPos = 1 - pixelAdjustOffset;

// 如果想在view的最底部画线，需设置lineMode为EUCPixelViewLineModeBottom

if (self.lineMode == EUCPixelViewLineModeBottom)

{

while (yPos + 1 < self.bounds.size.height) {

yPos ++;

}

}

CGContextMoveToPoint(context, 0, yPos);

CGContextAddLineToPoint(context, self.bounds.size.width, yPos);

CGContextSetLineWidth(context, 1);

CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor);

CGContextStrokePath(context);

}

有时间补上github上的demo地址

谢谢观看！