图像缩放与设备缩放的工作方式

时间:2018-06-21 11:58:57

标签: ios image

我试图了解图像在不同比例的设备和图像的设备上如何呈现。 如果将图像比例设置为x2,则图像为100x100px,1个用户点将为2px,因此在设备屏幕上使用x2比例(iphone7)和x3比例(ipxoneX)时图像尺寸将为50x50点,为什么? 怎么运作的?非常感谢您的详细解释

1 个答案:

答案 0 :(得分:0)

我们拥有的是图像,缓冲区和坐标系。图像有大小,缓冲区有大小,坐标系可能有大小。

在视网膜显示出物体时,在坐标系和缓冲区的上下文中引入了比例尺。基本上,我们以前是为实体320x480坐标系开发的,它也是缓冲区的大小,因此可以完美地像全屏一样绘制320x480图像。

然后视网膜会突然显示2倍的设备,从而产生640x960的缓冲区。如果没有比例尺,那么所有的硬编码值(我们曾经拥有)都会产生混乱的布局。因此,苹果坚持将坐标系保持在320x480并引入了比例,这基本上意味着UIKit与帧相关的逻辑保持不变。从开发人员的角度来看,所有更改都在于,@ 2x图像在使用资源中的图像进行初始化时会初始化一个较小的图像视图。因此,如果使用UIImageView(image: myImage),则512x512的图片将产生256x256的图片视图。

现在,除320x480及其乘数之外,我们还有很多东西,并使用自动布局。我们有1倍,2倍和3倍,将来我们可以得到10倍的电子保健(可能由于眼睛的限制而不会发生)。这些标尺实际上是在这里,因此所有设备都具有相似的PPI(每英寸点数),在坐标系中考虑这些点。这意味着,如果您放置一个高度为50px的按钮,则无论其比例如何,它在所有设备上的物理高度都将相似。

所有这些与渲染图像有什么关系?好吧,实际上什么也没有。比例尺只是坐标系和缓冲区之间的转换器。因此,如果您在代码(或IB)中以2x的比例创建50x50的图像视图,则可以预期其缓冲区为100x100。因此,如果您希望图像看起来不错,则应使用100x100的图像。但是,由于您要针对所有相关的比例尺执行此操作,因此应具有3张图像50x50、100x100和150x150,并以后缀@2x@3x命名,您将确保UIImage(name:)将使用正确的图像取决于当前的设备比例。

直接问您的问题:

如果将图像比例设置为x2,则1个用户点将为2px,因此图像尺寸将为50x50 :您通常不设置图像的比例。 UIImageCGImage的包装,它将始终具有直接大小。 UIImage使用其方向和比例来转换该大小。但是,如果您要使用@ 2x设置100x100图像,则在2x设备上,使用该图像初始化的图像视图的大小为50x50,这是坐标系,但会按原样绘制到100x100缓冲区中。

这可能很难解释,但是您要寻找的关键是坐标系的比例朝向显示分辨率(而不是朝向使用的缓冲区)。如果没有,我们将需要在分辨率更高的设备上增加所有功能。如果将两台设备的屏幕物理尺寸(假设为320x480)放在一起,其中第一台具有1x分辨率,第二台具有2x分辨率,那么所有组件的尺寸将是第二台的一半:图标32x32将占用1x宽度的10%和5%(2倍)。因此,要模拟相同的物理尺寸,我们实际上需要使用64x64图标,但随后还需要将框架设置为64x64。我们还需要使用更大的字体,否则所有文本都会突然变得很小...

我试图了解在设备和图像比例不同的设备上图像是如何呈现的。设备和图像之间没有“比例”概念。设备(在这种情况下为显示屏)将接收需要绘制的像素缓冲区。该缓冲区的大小将适合于此,因此我们只在谈论在此缓冲区上渲染图像。您可以通过任何方式通过UIKit在此缓冲区上渲染图像;如果需要,可以将400x230图像绘制到缓冲区的100x300部分。但是最好将400x230的图像绘制到缓冲区的400x230的部分,这意味着它没有被放大,缩小或以其他方式变形。所以假设:

  • 图片尺寸:64x64(实际图片像素)
  • UIView尺寸:320x320(.frame.size)
  • UIView比例:2倍
  • 图标大小:32x32(UIImageView.frame.size)
  • 缓冲区大小:640x640(将在其上绘制图像的实际缓冲区的大小)
  • UIImage大小:32x32(从加载的图片中获取的.size)
  • UIImage缩放比例:2倍(从加载的图片中获得的.scale)

现在,从缓冲区角度来看,您正在将64x64图像绘制到640x640缓冲区,该缓冲区占用每个尺寸的缓冲区的10%。从坐标系统的角度来看,您正在将32x32的图像绘制到320x320的画布上,每个尺寸占画布的10%。