iOS绘制1像素线的正确姿势

一、前言

事情的起因是这样的,因为需求的原因,有一个页面的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地址
谢谢观看!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,928评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,192评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,468评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,186评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,295评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,374评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,403评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,186评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,610评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,906评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,075评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,755评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,393评论 3 320
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,079评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,313评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,934评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,963评论 2 351

推荐阅读更多精彩内容