鸿蒙应用开发-图片像素转换一文搞懂

提前说明本文参考shangguigu的鸿蒙开发笔记

1.前置知识（屏幕参数）

想要理解上述尺寸单位，需要大家先掌握屏幕相关的几个参数

• 像素

屏幕显示的最小单位，屏幕上的一个小亮点称为一个像素。

• 分辨率

屏幕上横向和纵向的像素数量。

• 尺寸

屏幕对角线的长度，以英寸(inches)为单位。

• 像素密度

像素密度是每英寸屏幕上的像素数量，通常以PPI（Pixels Per Inch）表示，计算公式如下。较高的像素密度意味着在相同尺寸的屏幕上有更多的像素，从而提供更加清晰和细腻的图像。

如下图所示

2.px(Pixel)

物理像素，以像素个数来定义图像尺寸。这种方式的弊端是，在不同像素密度的屏幕上，相同的像素个数对应的物理尺寸是不同的。这样一来就会导致我们的应用在不同设备上显示的尺寸可能不同。如下图所示

3.vp(Virtual Pixel)

为了保证一致的观感，我们可以使用虚拟像素作为单位。虚拟像素是一种可根据屏幕像素密度灵活缩放的单位。1vp相当于像素密度为160ppi的屏幕上的1px。在不同像素密度的屏幕上，HarmonyOS会根据如下公式将虚拟像素换算为对应的物理像素。

根据上述公式，不难看出，使用虚拟像素作为单位时，同一尺寸，在像素密度低的屏幕上（单个像素的物理尺寸大），对应的物理像素会更少，相反在像素密度高的屏幕上（单个像素的物理尺寸小），对应的物理像素会更多。因此就能在不同像素密度的屏幕上，获得基本一致的观感了。如下图所示

4.自我理解

很容易知道在以px（物理像素）作为图片尺寸，不同像素密度PPI（横向像素/纵向像素不同）的情况下，相同的像素个数对应的物理尺寸是不同的。简言之就是PPI不同，对应的方格数量不同。

如何在不用的PPI下展示相同大小的图片呢？

使用vp虚拟像素。本质上是一种自动伸缩。

1vp相当于像素密度为160ppi的屏幕上的1px。 怎么理解呢？ 

假如一台手机像素密度高，为480，使用1vp会对应成3px；因为密度高，所以它对应的物理尺寸小（格子小），所以用了3px，即三个单位。

另外一台手机像素密度低，为160，则1vp对应1px；因为密度低，所以它对应的物理尺寸大（格子大），所以用了1px，即1个单位。

从而达到观感一直。