项目经验iOS-开发iOS Developer

iOS像素与点

2017-01-10  本文已影响410人  小黑_Coder

iOS上的像素(Pixel)与点(Point)

像素(Pixel)和点(Point)

我们在讨论这个问题之前，最起码要搞懂什么是点(Point)和什么是(Pixel)这个几个概念

1inch＝2.54cm =25.4mm

好概念就普及到这里了因为在装下去就要露馅了,今天有空为什么要说一说像素和点呢？因为在设计师验收的时候发现不合格(ps:自己都看不下去了),既然已经踩了坑，那就把过坑的方法拿出来分享一下吧(PS:鄙人学识短浅,哪有说的不对的地方还望大牛们多多指点)。

Xib带来的一点坑

场景

设计师经常喜欢在用户名，密码等输入框下面给一个高度为1px的下划线。这个时候对于开发人员来讲可能直接使用约束在输入框下面添加一个view然后修改背景颜色,此时我们就顺利入坑了。

xib.png

看上去好像是达到了我们预期的效果。我们这时在使用代码来实现一下。

//代码实现方式一
       for i in 0 ..< 5 {
            
           let view = UIView.init(frame: CGRect.init(x: 0, y: 200+CGFloat(i)*10, width: self.view.frame.width, height: 0.5))
           view.backgroundColor = UIColor.init(colorLiteralRed: 207.0/255.0, green: 181.0/255.0, blue: 107.0/255.0, alpha: 1)
           self.view.addSubview(view)
       }
        
//代码实现方式二
       for i in 0 ..< 5 {
            
           let view = UIView.init(frame: CGRect.init(x: 0, y: 300+CGFloat(i)*10, width: self.view.frame.width, height: 1.0/UIScreen.main.scale))
           view.backgroundColor = UIColor.init(colorLiteralRed: 207.0/255.0, green: 181.0/255.0, blue: 107.0/255.0, alpha: 1)
           self.view.addSubview(view)
        }

效果

在iPhone 7上实验了一下，结果却并不是我们想要的

result1.PNG

对比发现Xib实现的下划线存在有点的变粗有点变细，这一点对于设计师当然是不能忍受的。当然非要使用Xib来完成这一项需求也是可以的，我们可以把xib中的约束拖成类的属性，然后使用代码对约束进行修改。这个解决方案我写在了代码中就不在这里详细介绍了，如果感兴趣可以尝试一下，当然个人不推荐使用修改约束的方法。

分析

在iOS中,point独立于物理设备的逻辑坐标单位。iPhone 4之前non-retina屏幕的设备,一个point就代表一个像素;从iPhone 4到iPhone 7,采用retina屏幕;一个point,代表2X2个像素;Plus的设备,一个point代表3X3个像素。

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.

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

图片来自Apple官方文档.png

(1.f /UIScreen.main.scale) / 2;

最好的学习资料

官方文档：https://developer.apple.com/library/content/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html

欢迎讨论

email：huliuworld@yahoo.com
相关代码：https://github.com/LHCoder2016/PixelAndPoint.git

上一篇下一篇

猜你喜欢

热点阅读