美文网首页
移动开发切图命名中的 2x 与 3x

移动开发切图命名中的 2x 与 3x

作者: 大成小栈 | 来源:发表于2020-12-04 17:35 被阅读0次

    1. 点和像素的区别

    以iPhone 3GS、iPhone 4为例:iPhone 3GS 屏幕的宽高是 320 x 480 像素,其中视图的位置就是在屏幕的绝对位置。如视图frame = (20, 30, 40, 50),就表示它的宽40px,高度50px,起始点为(20, 30)。iPhone 4 物理尺寸不变,而屏幕像素变为640 x 960。

    iPhone 4 的屏幕叫作 Retina 显示屏,640 x 960 = 1154 像素除以3.5英寸,为330ppi(官方数据为326ppi)。像素高于 300ppi 时,人眼基本无法分辨单个像素,因此,iPhone 4 屏幕称为 Retina 屏(视网膜屏)。

    真实像素数量与尺寸可以动过屏幕的scale进行换算,下面表格中的1x、2x就是屏幕的scale,2x 就代表1个点等于2个像素。而在代码中,我们获取屏幕的尺寸是与下表中的第二列一样的,两种设备相同:

    点作为基本单位,及屏幕模式

    点的概念(point):iOS 开发过程中 iPhone 4 屏幕尺寸继续保持320 x 480,不过单位并非像素,而是点。在iPhone 3GS中,1个点等于1个像素,在iPhone 4中,1个点等于2个像素。iPhone 4 和 iPhone 3GS 的屏幕尺寸都是3.5英寸,但是 iPhone 4 在单位英寸上像素更多,也就看起来更细腻。(像素可以想象成屏幕上真正用来显示颜色的发光小点)

    以点为单位在开发过程中处理视图尺寸,有效屏蔽了设备间不同像素屏幕带来的布局上的差异,可以完美兼容之前的程序。

    2. 关于切图中的2x、3x

    • 矢量图:也称为面向对象的图像或绘图图像,在数学上定义为一系列由线连接的点。根据几何特性来绘制图形,矢量可以是一个点或一条线,矢量图只能靠软件生成,文件占用内在空间较小,因为这种类型的图像文件包含独立的分离图像,可以自由无限制的重新组合。

    • 位图:是由称作像素(图片元素)的单个点组成的,点可以进行不同的排列和染色以构成图样。扩大位图尺寸的效果是增大单个像素,从而使线条和形状显得参差不齐。

    文字、颜色等是矢量数据,放大是不会失真的,因此,文字、颜色等在各个机型上使用都可以清晰显示。而图片并非矢量数据,处理方式有所不同。假设图片 example.png,大小为 30 x 40像素(这里的单位是像素,数字图片的单位通常都为像素)。当这张example.png在iPhone 3GS和iPhone 4中使用时候,都占据屏幕上30 x 40个点。而因为iPhone 4中1个点等于2个像素,也就是30 x 40像素的图片,占据了60 x 80像素的屏幕,因此这图片在iPhone 4中看起来就会模糊。

    图片也有1x、2x模式,开发的时需要进行图片与屏幕的适配,使不同scale的图片各就其位,才能得到更晰的显示效果。这时需要准备两张不同scale的图片放在同一目录下:
    example.png // 30 x 40像素
    example@2x.png // 60 x 80像素

    在iPhone 6 Plus中,还出现3x模式,原理是一样的。当iPhone 4选中example@2x.png的图片,就会生成一张大小为30 x 40个点,2x模式的图片。这个时候,图片看起来就会很清晰了。而没有适配的旧程序,example@2x.png不存在,就选中example.png,生成大小为30 x 40个点,1x模式的图片,看起来比较模糊。但它们占据的屏幕点数是一样的。

    3. iOS中不同scale图片的自动适配

    用语句 [UIImage imageNamed:@"example"]; 来调用assert里的图片资源,系统会根据屏幕模式自动选择对应的图片。屏幕1x模式,就会选择 example.png,2x 模式就会优先选择 example@2x.png,假如 example@2x.png不存在,就选择 example.png。假如只有 example@3x.png,图片也会被加载到,但系统显示时图片会被“压缩”。

    在实际工作中我们只需要切@2x和@3x两套图即可,因为1x的设备已经基本不用。

    相关文章

      网友评论

          本文标题:移动开发切图命名中的 2x 与 3x

          本文链接:https://www.haomeiwen.com/subject/dfuiwktx.html