iOS: 如何正确的绘制1像素的线

原文地址:http://www.cnblogs.com/smileEvday/p/iOS_PixelVsPoint.html

iOS: 如何正确的绘制1像素的线

iOS 绘制1像素的线

一、Point Vs Pixel

iOS中当我们使用Quartz,UIKit,CoreAnimation等框架时,所有的坐标系统采用Point来衡量。系统在实际渲染到设置时会帮助我们处理Point到Pixel的转换。

这样做的好处隔离变化,即我们在布局的事后不需要关注当前设备是否为Retina,直接按照一套坐标系统来布局即可。

实际使用中我们需要牢记下面这一点:

One point doesnotnecessarily correspondtoone physical pixel.

1 Point的线在非Retina屏幕则是一个像素,在Retina屏幕上则可能是2个或者3个,取决于系统设备的DPI。

iOS系统中,UIScreen,UIView,UIImage,CALayer类都提供相关属性来获取scale factor。

原生的绘制技术天然的帮我们处理了scale factor,例如在drawRect:方法中,UIKit自动的根据当前运行的设备设置了正切的scale factor。所以我们在drawRect: 方法中绘制的任何内容都会被自动缩放到设备的物理屏幕上。

基于以上信息可以看出,我们大部分情况下都不需要去关注pixel,然而存在部分情况需要考虑像素的转化。

例如画1个像素的分割线

看到这个问题你的第一想法可能是,直接根据当前屏幕的缩放因子计算出1 像素线对应的Point,然后设置线宽即可。

代码如下:

1.f / [UIScreen mainScreen].scale

表面上看着一切正常了,但是通过实际的设备测试你会发现渲染出来的线宽并不是1个像素。

Why?

为了获得良好的视觉效果,绘图系统通常都会采用一个叫“antialiasing(反锯齿)”的技术,iOS也不例外。

显示屏幕有很多小的显示单元组成,可以接单的理解为一个单元就代表一个像素。如果要画一条黑线,条线刚好落在了一列或者一行显示显示单元之内,将会渲染出标准的一个像素的黑线。

但如果线落在了两个行或列的中间时,那么会得到一条“失真”的线,其实是两个像素宽的灰线。

如下图所示:

Positions definedbywhole-numbered points fall at the midpoint between pixels.Forexample,ifyou draw a one-pixel-wide vertical linefrom(1.0,1.0)to(1.0,10.0), yougeta fuzzy grey line.Ifyou draw a two-pixel-wide line, yougeta solid black line because it fully covers two pixels (oneoneither sideofthe specified point).Asa rule, lines that are an odd numberofphysical pixels wide appear softer than lineswithwidths measuredineven numbersofphysical pixels unless you adjust their positiontomake them cover pixels fully.

官方解释如上,简单翻译一下:

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

如何对齐呢?

Ona low-resolution display (witha scale factorof1.0), a one-point-wide lineisone pixel wide.Toavoid antialiasingwhenyou draw a one-point-wide horizontalorvertical line,ifthe lineisan odd numberofpixelsinwidth, you must offset the positionby0.5pointstoeither sideofa whole-numbered position.Ifthe lineisan even numberofpointsinwidth,toavoid a fuzzy line, you mustnotdoso.Ona high-resolution display (witha scale factorof2.0), a line thatisone point wideisnotantialiased at all because it occupies two full pixels (from-0.5to+0.5).Todraw a line that covers only asinglephysical pixel, you would needtomake it0.5pointsinthicknessandoffset its positionby0.25points. A comparison between the two typesofscreensisshowninFigure1-4.

翻译一下

在非高清屏上,一个Point对应一个像素。为了防止“antialiasing”导致的奇数像素的线渲染时出现失真,你需要设置偏移0.5Point。在高清屏幕上,要绘制一个像素的线,需要设置线宽为0.5个Point,同事设置偏移为0.25Point。如果线宽为偶数Point的话,则不要去设置偏移,否则线条也会失真。

如下图所示:

看了上述一通解释,我们了解了1像素宽的线条失真的原因,及解决办法。

至此问题貌似都解决了?再想想为什么在非Retina和Retina屏幕上调整位置时值不一样,前者为0.5Point,后者为0.25Point,那么scale为3的6 Plus设备又该调整多少呢?

要回答这个问题,我们需要理解调整多少依旧什么原则。

再回过头来看看这上面的图片,图片中每一格子代表一个像素,而顶部标记的则代码我们布局时的坐标。

可以看到左边的非Retina屏幕,我们要在(3,0)这个位置画一条一个像素宽的竖线时,由于渲染的最小单位是像素,而(3,0)这个坐标恰好位于两个像素中间,此时系统会对坐标3左右两列的像素对填充,为了不至于线显得太宽,为对线的颜色淡化。那么根据上述信息我们可以得出,如果要画出一个像素宽的线,就得把绘制的坐标移动到(2.5, 0)或者(3.5,0)这个位置,这样系统渲染的时候刚好可以填充一列像素,也就是标准的一个像素的线。

基于上面的分析,我们可以得出“Scale为3的6 Plus”设备如果要绘制1个像素宽的线条时,位置调整也应该是0.5像素,对应该的Point计算如下:

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

奉上一个画一像素线的一个宏:

#defineSINGLE_LINE_WIDTH          (1 / [UIScreen mainScreen].scale)#defineSINGLE_LINE_ADJUST_OFFSET  ((1 / [UIScreen mainScreen].scale) / 2)

使用代码如下:

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

二、正确的绘制Grid线条

贴上一个写的GridView的代码,代码中对Grid线条的奇数像素做了偏移,防止出现线条模糊的情况。

SvGridView.h

////  SvGridView.h//  SvSinglePixel////  Created by xiaoyong.cxy on 6/23/15.//  Copyright (c) 2015 smileEvday. All rights reserved.//#import@interfaceSvGridView:UIView/**

* @brief 网格间距,默认30

*/@property(nonatomic,assign)CGFloatgridSpacing;/**

* @brief 网格线宽度,默认为1 pixel (1.0f / [UIScreen mainScreen].scale)

*/@property(nonatomic,assign)CGFloatgridLineWidth;/**

* @brief 网格颜色,默认蓝色

*/@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)@implementationSvGridView@synthesizegridColor = _gridColor;@synthesizegridSpacing = _gridSpacing;- (instancetype)initWithFrame:(CGRect)frame{self= [superinitWithFrame:frame];if(self) {self.backgroundColor = [UIColorclearColor];                _gridColor = [UIColorblueColor];        _gridLineWidth = SINGLE_LINE_WIDTH;        _gridSpacing =30;    }returnself;}- (void)setGridColor:(UIColor*)gridColor{    _gridColor = gridColor;        [selfsetNeedsDisplay];}- (void)setGridSpacing:(CGFloat)gridSpacing{    _gridSpacing = gridSpacing;        [selfsetNeedsDisplay];}- (void)setGridLineWidth:(CGFloat)gridLineWidth{    _gridLineWidth = gridLineWidth;        [selfsetNeedsDisplay];}// Only override drawRect: if you perform custom drawing.// An empty implementation adversely affects performance during animation.- (void)drawRect:(CGRect)rect{CGContextRefcontext =UIGraphicsGetCurrentContext();CGContextBeginPath(context);CGFloatlineMargin =self.gridSpacing;/**

*  https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html

* 仅当要绘制的线宽为奇数像素时,绘制位置需要调整

*/CGFloatpixelAdjustOffset =0;if(((int)(self.gridLineWidth * [UIScreenmainScreen].scale) +1) %2==0) {        pixelAdjustOffset = SINGLE_LINE_ADJUST_OFFSET;    }CGFloatxPos = lineMargin - pixelAdjustOffset;CGFloatyPos = lineMargin - pixelAdjustOffset;while(xPos

使用方法如下:

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

三、一个问题

好了,到这儿本文的全部知识就结束了,最后我还有一个问题。

设计师为什么一定要一个像素的线?

一个像素的线可能在非Retina设备上显示宽度看着合适,在Retina屏幕上显示可能会比较细。是不是一定需要一个像素的线,需要根据情况来处理。

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

推荐阅读更多精彩内容