关于 Xcode 中的 PDF 矢量图片



- 作者: SwiftCafe


之前和大家的交流中探讨到了 XCode 对 PDF 矢量图片资源的支持,为此特意查阅了相关内容,和大家继续分享。

PDF 图片资源

听到 PDF,可能大多数人的第一反应会是一个文档文件。 但在 XCode 中,它还可以是矢量图资源文件。 比如你有一个 PDF 的矢量图资源, 你只需要将他们拖放到 XCode 的 Assets 中:

然后像使用普通的 png 图片一样通过 UIImage 来引用:

1
let icon = UIImage(named: "ic_pdf")

而且因为它是矢量图,也就不需要像 png 图片那样, 要我们提供 2x 3x 等多种分辨率的图片了。

那么 XCode 处理 PDF 图片的原理是什么呢? 我们继续来介绍。

XCode 处理 PDF 矢量图的时机并不是在 runtime 而是在 build time。 所谓 runtime, 就是在运行时根据我们需要的图片大小来计算出矢量图实际显示的内容。但会稍微增加一些性能消耗。

程序设计的整体思路都是不变的,一般来说,在问题规模不便的情况下。 如果要解决同样的一个问题,要么增加时间复杂度(就是我们说的 runtime,在性能上做出牺牲),要么就增加空间复杂度(就是我们这里说的 build time, 在存储空间上做出牺牲)。

XCode 采用的是后者。 对于我们提供的 PDF 矢量图, XCode 会在构建项目的时候自动生成相应的 2x 和 3x 这些图片。 而不是在运行时对 PDF 图片进行缩放。

这样来说, XCode 使用 PDF 图片最后生成的包体积并不会有太多的减少。并且 PDF 图片是矢量图,如果图片中包含一些复杂的渐变或者阴影效果,那么 PDF 矢量图片有可能会出现一些图片显示效果上的虚化等。

所以,如果你期待 PDF 图片会对你的包体积有改进的话, 那么这个因素就不要考虑了, 包的体积不会因为用了 PDF 图片而变小。 因为 XCode 在构建的时候还是会根据这个 PDF 生成 2x,3x 这些图片。

并且你要保证你所使用的 PDF 图片是真正的矢量图格式(PDF 图片不全都是矢量图)。 如果你使用的是非矢量的 PDF 图片,那么在高分辨率设备上,图片就会被拉伸虚化了。

总体来看,对于相对复杂的图片,比如带有渐变或是阴影都效果的。 使用 PNG 点阵图提供 2x,3x 各个分辨率,可以保证在设备上显示出的效果最完整。 对于结构简单的图片(比如纯色的形状图片),使用矢量 PDF 会更加简便,不用导出各种分辨率(XCode 会帮你导出),并且如果未来有更多分辨率的设备加入时(如果出现 4x 图片),不需要做任何改动,就可以自适应新设备。

了解了 PDF 和 PNG 的这些特点以及各自的优势和缺陷后, 相信会让你对图片方案的选择更加准确。 这里还有一篇讨论 PDF 更多细节的文章, 大家也可以继续深入了解:

https://bjango.com/articles/idontusepdfs

PDF 的由来

上面就是 PDF 图片的基本介绍了, 这里再跟大家聊聊关于 PDF 图片的一些背景。 PDF 的前身是 PostScript。 PostScript 是一种比较久远的语言了。最初用在打印机上用于描述文档的一些打印格式等。 PDF 和 PostScript 都是 Adobe 公司创造的。

后来 NeXT 和 Adobe 基于 PostScript 联合开发了新的 Display PostScript, 用于在 NeXT 操作系统中的图形系统。 而 NeXT 的创始人,正式我们人人都熟悉的乔布斯。 而在后来的 Mac OS X 系统中,它的图形系统依然扩展自 PostScript。

Quartz 2D 正是 Mac 系统中使用的类似于 PostScript 的图形库, 它使用 PDF 格式作为渲染模型。 一部分是因为版权原因。 因为 Adobe 对于 PDF 的限制更加少,可以让第三方更加随意的使用。

这也就是苹果为什么使用 PDF 图片的历史原因了,XCode 对于 PDF 目前只能做到在构建时候生成点阵图, 但 Mac 系统对于 PDF 支持就更多了, 可以支持运行时自动缩放。

以上相关内容大家如果感兴趣可以到 Wikipedia 上面了解更多:

https://en.wikipedia.org/wiki/NeXT
https://en.wikipedia.org/wiki/Display_PostScript

结尾

目前 XCode 使用 PDF 图片的方式,还处在构建时生成的阶段。 也许是性能或是其他方面的考虑。 但也有一些第三方库提供了运行时的 PDF 渲染能力, 比如 UIImage-PDF https://github.com/mindbrix/UIImage-PDF。 相信对你考虑项目图片方案的时候会有一个参考效用。

如果你觉得这篇文章有帮助,还可以关注微信公众号 swift-cafe,会有更多我的原创内容分享给你~

本站文章均为原创内容,如需转载请注明出处,谢谢。




微信公众平台
更多精彩内容,请关注微信公众号


公众号:swift-cafe
邮件订阅
请输入您的邮箱,我们会把最新的内容推送给您: