[iOS] 试一发 Xcode6 中的矢量图

Xcode6支持矢量图资源导入,可自动生成@1x、@2x、@3x版本位图,有助于减少开发者工作量并提高图片质量。通过对比实验发现,在不同显示比例下,矢量图相比PNG格式展现出更好的清晰度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Xcode6中有一个十分方便的功能,就是导入的图片资源支持矢量图格式。这对于开发者来说无疑是个天大的好消息。


不过,这矢量图怎么搞?有什么好处?效果到底如何?不妨打开 Xcode6 来一发试试看,亲自体验一下矢量图的魅力。


我们先用Sketch制作了一个30*30的图标,导出了pdf和png格式:




然后在Xcode6的 Images.xcassets中添加两个图标。首先是矢量图版本的:




接下来是PNG版本的,我们只上传了@1x 版本的位图:



然后我们找一个页面,同时放上两个图片进行比较。


第一次实验:长宽均为100,即非等比拉伸:




可以看到@1x的图因为没有做@2x和@3x 版本,细节处有很多模糊的情况。


第二次试验:长宽均为240,等比显示:





差距是比较明显的。



Xcode6在使用矢量图的时候,会生成对应的@1x、@2x、@3x版本的位图,相当于帮我们做了适配的工作。比如30*30的矢量图导入,运行时会生成下面三个尺寸的位图:

@1x = 30*30

@2x = 60*60

@3x = 90*90


嗯大概就是这样。所以个人开发者们可以尝试一下用矢量图减少自己的工作量。公司里就算了,让美工们忙碌起来吧!




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值