|
|---|
|
|
|
|
|
|
R******o
发帖数: 1572 | 1 http://www.betanews.com.cn/iphone/2013-09-05/4971.shtml
前言
2012年，苹果将旗下的 MacBook Pro 15 系列升级到 Retina 显示屏幕。众所周知，
Retina 显示比以往的屏幕显示更清晰，锐利，但是很少有人知道这种技术背后的原理
，这里简单，抽象地解释一下。 一直以来我们都有一个认识，位图不是点对点输出的
话是会变模糊的。那么究竟是那个点对那个点呢？一般我们将第一个点叫做用户界面，
第二个点叫做输出界面。长久以来我们有一个误会，用户界面和输出界面都是用像素来
表示的。诚然，在 Retina 发布以前，这种概念错误也是无伤大雅的。但当 Retina 发
布后，这种概念需要纠正了。
点不等于像素
图像从计算机输出经过一套渲染过程，概括来说分成三步：用户界面布置，图层送入渲
染器，输出。Windows 的使用经验获知，设定桌面分辨率就是设定输出的分辨率。一般
来说，这样的概念没有错。如果将 Windows 的渲染分成三步，每次改变一个用户界面
元素都是对用户界面进行一次布置；改变后的图层送入渲染器进行渲染和合并图层；根
据设定好的桌面分辨率输出图像。 实际上，矢量图被渲染前都不能用像素来表示。操
作系统图形界面几乎全部元素都是矢量图，这还包括字体。一般用点（pt）来表示没渲
染的用户界面分辨率，渲染输出后的图像用像素（pix）表示输出分辨率。 Windows 的
用户界面设定分辨率等于图像输出分辨率，所以这里 pt=pix。非使用 Retina 的 OS X
也是 pt=pix。但，Retina For OS X 是不等的，pt!=pix ，因为它输出后的 pix 比
同一个用户界面分辨率的 Windows 或 OS X 多了四倍。 输出分辨率的像素一般与显示
器的物理像素（或点）是对应的，关系是1：1。但是一些特殊处理可以让较低的输出像
素分辨率扩展输出到较高的物理像素的显示器之上。或相反，较高的输出像素分辨率缩
小到较像素的显示器上。
图层
在图像输出前，用户界面里所有的元素都是一个图层，如应用窗口里的按钮，桌面上的
图标，每个应用各自的图层集合可以称作图层组，如QQ窗口图层组。用户界面由不同的
用户组组成，包括：桌面图层组，应用图层组等。应用生成界面需要调用资源，这些资
源保存在磁盘并在应用启动时加载到内存。用户界面资源可以是操作系统提供的，可以
是开发者提供的。操作系统提供的资源具有统一性，也有较好的运行效率，但缺乏个性
。开发者提供的资源在运行效能上不及操作系统提供的，但可以自定义个性化，缺乏统
一性。 OS X 的界面元素经过一个系统进程的操作后输出到显示器，这个进程是
WindowServer ，这个进程通过将不同的图层组混合，渲染出像素后合并所有图层并输
出到显示器。
从图中可以看出，用户界面都是经过很多图层组组合而成的，而且最后都要经过渲染器
合并并输出到一个个的像素点。
字体
字体一般都是用pt作为单位，对于pt=pix的情况，15pt的字体视觉尺寸就是15pix的视
觉尺寸。而 Retina 下 15pt的字体与 Normal 的15pt字体视觉尺寸完全一样，但是pix
变成了30。也就是用了更多的像素去显示同一个视觉尺寸的字体。
渲染
计算机图形需要经过渲染后输出成为人类能识别的像素，在一个2维图形生成后，它仅
仅是一个框架，渲染器赋予它色彩和特效，这个过程一般叫做栅格化。如图，QQ窗口的
栅格化。渲染器渲染图像依靠一些参数：图形的每个点的位置，图形的纹理，与其他图
形的关系（如QQ窗口按钮与QQ窗口的关系）。
Layout
Layout又叫做布置，构图。每个图层组都需要知道自己在用户桌面的具体位置，图层组
的位置相对于桌面来说是一个变量，通过用户的输入而改变。渲染器需要知道每个图层
组相对于桌面的位置，以便合成输出后的画面正确。
Scale Factor
直译为缩放系数。OS X的应用程序窗口图层组（包括桌面图层组）在生成前都要根据这
个参数来进行缩放，在 Retina For OS X 里默认 Scale Factor 的值为2.0，这意味着
图层组需要放大两倍。这个参数是 Retina 显示技术的关键。举个例子：当前用户界面
分辨率设置为 1280x800点（pt） （Retina For OS X下是13寸的最适 Retina 分辨率
），进行 Scale Factor 2.0 放大 1280x2.0 800x2.0 = 2560x1600点（pt），QQ用户
窗口大小为 500x500点（pt） 经过缩放后 1000x1000（pt）。当每个图层组经过缩放
后就会送入渲染器，渲染器根据 Layout 将每个图层合并输出为像素（pix） 在图层组
上的位图同样根据 Scale Factor 参数来放大，例如浏览器的图片，最终输出像素放大
了四倍。 有一个特例是图片浏览器，图片浏览器图层组是由操作系统UI加上某张位图
组成的。位图窗口图层是特殊的，它不需使用 Scale Factor 的指定值来布置（Layout
）也可以说是 Scale Factor 1.0 ，不做任何缩放。如一张图片是500x500像素组成的
，经过 Scale Factor 1.0 Layout 后输出的像素保持为500x500像素。 其它非使用
Retina 屏幕的 OS X 都是不使用 Scale Factor 或使用 Scale Factor 1.0 的。
渲染抽象流程
假设用户的笔记本是13寸的 MacBook Pro with Retina ，显示器的物理像素分辨率是
2560x1600pix 。当操作系统启动后，用户的所有界面图层都会被输出到显示器，默认
的分辨率设置是 1280x800pt 。打开QQ，将窗大小改变为 500x500pt，再用系统的图片
浏览器打开一张 500x500pix 的位图。这时流程如下图。
详细的流程图如下:
显示器物理像素分辨率
液晶显示器像素（或点）由三个不同颜色的液晶点组成。绝大多数情况下输出像素等于
显示器物理像素，但也存在例外。当用户使用非显示器标准分辨率来输出图像时，显示
器或操作系统都会经过一些操作让输出分辨率适配物理像素分辨率。 当用户分辨率设
值低于显示器物理值，则选择下面两种策略（非 Retina 显示器）： 1.操作系统在输
出前对渲染后的图像进行扩大以适配显示器 2.如果操作系统不支持扩大输出，显示器
从内部对输入的图像进行扩大 3.按输出图像像素分辨率的1：1输出到显示器，显示器
对输入图像进行1：1输出，并且周围留黑边，需要显卡或显示器支持 当用户分辨率设
值高于显示器物理值，则选择下面两种策略 1.操作系统在输出前对渲染后的图像进行
缩小以适配显示器（OS X with Retina），例如将13寸设置用户分辨率在1280x800pt以
上，15寸在1440x900pt以上。 2.如果操作系统不支持缩小输出，显示器将输入的图像
局部输出，需要显示器支持
OS X 外接显示器
根据输出的方式，外接显示器可以有三种状态，分别是：单独输出，镜像输出，扩展输
出。 单独输出则不使用 Scale Factor 或使用 Scale Factor 1.0 Layout 镜像输出又
分成：使用笔记本分辨率镜像输出，使用外接显示器分辨率输出。当使用笔记本分辨率
，渲染器输出两张图，一张直接输出到笔记本显示器；一张经过缩小输出到目标显示器
。当使用外界显示器分辨率时，全部图层进行 Scale Factor 1.0 Layout ，渲染器输
出两张图，直接输出到外界显示器，扩展输出到笔记本显示器。 扩展输出则是需要对
桌面图层组和应用程序窗口组进行两种 Scale Factor Layout ，当在笔记本画面内的
进行 Scale Factor 2.0 Layout 输出；外界显示器画面内的 Scale Factor 1.0
Layout 输出。
网页支持
尽管 Retina 屏幕迅速流行起上来了，但是支持它的网页设计却少得可怜，主要原因在
于网页上的位图。运行在 Retina 上的浏览器请求Web服务器的页面是与用户界面点是
一致的，例如用户界面是1280x800pt的，那么浏览器请求的页面就是1280x800pt的了。
从上面的流程图知道，所有图层都需要经过指定Sacle Factor 2.0的。那么本来网页里
300x300pix的图片在 Retina 里就变成600x600pix的了。解决方法就是将2x的图片放到
300x300pt的框框里，当Web服务器接受到浏览器的请求时（附带Retina的信息），服务
器替换地发送2x的位图到客户的 Retina 机器上，这样一张600x600pix的图片就缩放在
300x300pt的框框里。当机器将浏览器的图层指定 Scale Factor 2.0 后，所有图层都
经过放大，而对于在300x300pt框内的600x600pix图片就会放大2倍变成1200x1200pix，
然后缩放在600x600pix的框框里边。
如楼主的头像，经历过整套流程后就大概是这样的感觉。
总结
OS X 这套渲染流程得益于统一的API，每个使用Cocoa生产出来应用都无需大的改变就
能完美支持，而需要修改的仅仅是一些非 Cocoa 提供的外部资源，如自定义的位图，
图标，UI元素，字体等。相对来说 Windows 就没有那么幸运了，由于底层的API没有很
好地统一，不同的应用都使用不同的API，最后导致的结果是，系统的所有原素都支持
高 PPI 输出了，但是第三方应用就比较可怜了，需要修改的不单是位图，图标等原素
，还包括 API。
PS：实际上，iOS也是类似的方式进行变换的。 PS2：这里只是简单将 Retina 的渲染
过程抽象成流程图，实际的渲染过程是非常复杂的。想要仔细了解的话可以参考苹果的
官方技术文档。 |
|
|
|
|
|
|
