矢量图处理还是有小小问题

2014-10-12 14:56:59 +08:00
 yellowV2ex
有一个图片,在iPhone5的内的宽是100,用autolayout,根据iPhone6和plus的宽度会放大一点点到150,那么对应的@3x图就不是3x了,而是更大的基于@1x再大概5x才对。

1x = 100x100
2x = 200x200
3x = 300x300

iPhone6 Plus内放大一些 1x = 150x150,那么图片的 3x = 450x450 才够,但xcode编译出来的3x是没有变化的,本以为用autolayout和size class,xcode就会自动处理一下的,毕竟我在iPhone6+上这个UIImageView是多大,用了autolayout之后xcode应该比我还要清楚。


assets里可以选 Bitmaps and Vectors ,可以手动指定@3x的图,但这样我还不如索性连2x的图也做了算了,用矢量图要导出PDF还要加Image set,间接也增加了工作量。

那么这种情况,Vector的意义就不大了,@3x我要另外做一张尺寸不一样的图片换上。

其实这种情况还是蛮多的,414和320的宽度比起来并不是差一点两点,很多图标按钮,图片资源都要重新布局调整大小,虽然大多情况下那些误差在真机上差别并不大,但还是很纠结这个@3x对于尺寸放大后的UIImageView来说,像素还是不够。
2722 次点击
所在节点    iDev
2 条回复
blank_dlh
2014-10-12 15:29:05 +08:00
Autolayout 是运行时来根据约束确定布局,而矢量资源是在编译时处理的。

这两天正好在看适配,也碰到了类似的问题,我的理解是 iPhone 6 的变化主要影响的是和宽度有关的元素。

矢量资源比较适用的是等比例的变化。比如界面上的 icon ,它在不同设备上的尺寸(pt)是一样的,所以可以直接用一套矢量资源。而对于 lz 提到的情况,在不同设备上的尺寸(pt)发生了变化,如果要保证清晰的话只能设计多套了。
blank_dlh
2014-10-12 15:43:11 +08:00
再举个例子,比如要给 NavigationBar 做个背景图(非 resizable),那么在这张图在不同设备上的分辨率是:
iPhone 6 Plus: 1242px * 192px
iPhone 6: 750px * 128px
iPhone 5 & iPhone 5s 等: 640px * 128px

在一个 Image Set 里面可以把 1242px * 192px 设置为 @3x ,750px * 128px 设置成 @2x,剩下的只能再建一个 Image Set。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/138455

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX