iOS 对矢量图片的支持如何

本文概述了iOS系统及应用中对矢量图片的支持情况,包括CoreGraphics框架的矢量绘图能力、原生支持的PDF和SVG文件类型、以及在实际应用中的常见问题与限制。
简单说,iOS 支持矢量图片,不过支持的一般。

在系统层面上,iOS 对矢量绘图支持得很好。iOS 的 Core Graphics 框架带有很多矢量绘图命令,简单一些的直线、矩形、椭圆,复杂一些的贝赛尔曲线都可以画,也可以指定填充、描边什么的。如果要是做 App 时想画一个简单的图形,直接用代码就可以画,就省去动用 PS、AI 画然后在导入的功夫了。

对于具体的文件类型处理上,(根据个人经验)iOS 原生支持两种矢量图片:PDF (对,PDF 也可以算是矢量图)和 SVG,不过都支持的一般。

iOS 的 Core Graphics 框架底层和 OS X 一样,都是基于 PDF 的。所以 iOS 用 PDF 很方便,比如 iOS 的 Quick Look 框架就可以直接看 PDF。如果要是只看文档那样简单的 PDF 的话,一般是没有什么问题的。不过,如果要是想看用 AI 制作的,带有多重描边、填充、网格渐变、阴影、多图层等东西的复杂 PDF 图形的话,有很大机率会出现问题。比如,在 iOS 和 OS X 上常出现的一个问题是,PDF 文稿里隐藏的图层、图形被显示出来。如果查看复杂一些的 PDF,很可能在 Adobe Illustrator、OS X、iOS、Adobe Reader 下查看的效果都不一样。所以说,PDF 虽然一般被认为是跨平台的「安全格式」,不过也并不是 100% 保险。 Adobe Reader 的 iOS 版很可能没有使用 iOS 系统自带的 PDF 和矢量绘图 API,而是自己实现了一个,因此通常 Adobe Reader 显示复杂一些的 PDF 比使用 iOS 原生 API 解析 PDF 的 App 更准确一些。还有, 无论是使用 iOS 原生的 Quick Look 还是用 Adobe Reader 查看,渲染复杂的 PDF 有可能特别慢,之前在 iPad 3 上查看自己用 AI 做的 PDF,每一页至少要渲染半分钟,有些甚至要渲染一分钟以上。

另一种常见的矢量图形是 SVG 格式的。SVG 格式的矢量图可以用 InkScape、AI 这样的矢量图创作软件制作、导出。SVG 是纯文本格式的 XML 文件,直接用文本编辑器手写也可以。iOS 的 Safari 浏览器和 UIWebView 控件是支持 SVG 图形的,比如像维基百科上的「日章旗」矢量图:

(转)iOS 对矢量图片的支持如何? - Gamebaby Rock Sun - Gamebaby Rock Sun的博客


稍复杂一些的也可以,比如英国国徽:

(转)iOS 对矢量图片的支持如何? - Gamebaby Rock Sun - Gamebaby Rock Sun的博客


不过,iOS 和 OS X 上的 Safari 以及系统自带的 WebKit 组件有一个缺点:对于一些复杂的 SVG 滤镜支持的不太好(SVG 滤镜的概念和使用可以参考我之前写的一篇文章: http://zhuanlan.zhihu.com/akirachang/19675967 ),只支持一些较简单的 SVG 滤镜,比如 feGaussianBlur 高斯模糊滤镜。像一些较为复杂的滤镜,比如 feDiffuseLighting,可能会显示有误:

(转)iOS 对矢量图片的支持如何? - Gamebaby Rock Sun - Gamebaby Rock Sun的博客

如图,上面一排是预期效果(预渲染),下面一排是 SVG 滤镜实时渲染效果。可以看到,渲染出来的效果与预期效果有很大的偏差。

另外,还有 EPS 格式的矢量图。iOS 似乎不支持这种格式,不过可以通过一些开源的库将其解析为 Core Graphics 能够理解的东西。

还有就是 Adobe Illustrator 原生的 AI 格式。iOS 系统似乎也不可以通过 Quick Look 直接查看。不过 Dropbox 实现了 AI 文件的预览,渲染应该是在服务器端实现的。

差不多就这些了。 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值