HarmonyOS系统开发ArkTS常用组件图片及参数（四）

下一章

目录

一、前置知识

1、Resources目录

2、屏幕参数

二、图片组件参数

1、string类型

2、Resource类型

 3、media.PixelMap类型（了解）

三、图片组件常用属性

1、图片尺寸

1.1、string类型

1.2、number类型

1.3、Resource类型

2、图片缩放

---

一、前置知识

1、Resources目录

      Resources目录用于统一存放应用所需的各种资源，包括图片、音频、视频、文本等等。下面简要介绍 resources 目录的用法，首先需要了解 resources 的目录结构：

      resources 目录下，可能存在base、（zh_CN和en_US）、系统主题（dark和light）、设备类型（phone 和 tablet）和 rawfile 等适配不同的环境的不同版本的目录。其中 zh_CN和en_US目录都包含 element、media、profile文件夹。

      我们可以为上述每种环境各自准备一套资源文件，每种环境对应 resources 下的一个目录，例如上述的 zh_CN 和 en_US。我们在使用resources下的资源时，无需指定具体的环境版本，系统会根据设备所处的环境自动选择匹配的版本，例如当设备系统语言为中文时，则会使用zh_CN目录下的资源，为英文时，则会使用en_US目录下的资源。若没有与当前所处环境相对应的版本，则使用 base 目录下资源。

各目录存储的具体资源如下

• media     

       存放媒体资源，包括图片、音频、视频等文件。

• element

       存放用于描述页面元素的尺寸、颜色、样式等的各种类型的值，每种类型的值都定义在一个相应的 JSON 文件中。

• profile

       存放自定义配置文件。

• rawfile

       用于存储任意格式的原始文件，需要注意的是rawfile不会根据设备所处的环境去匹配不同的资源。

2、屏幕参数

       大家先掌握屏幕相关的几个参数：

• 尺寸：     屏幕对角线的长度，以英寸(inches)为单位。
• 像素：     屏幕显示的最小单位，屏幕上的一个小亮点称为一个像素。单词Pixel，简写 px
• 分辨率：  屏幕上横向和纵向的像素数量。
• 像素密度： 像素密度是每英寸屏幕上的像素数量，通常以PPI（Pixels Per Inch）表示，计算公式如下。

• 

       关系：像素密度高 -- > 每英寸屏幕像素多 --> 画质细腻

                  像素密度低 -- > 每英寸屏幕像素少 --> 画质粗糙

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

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

       根据上述公式，不难看出，使用虚拟像素作为单位时，同一尺寸：

•       像素密度低---> 屏幕物理像素少--->单个像素的物理尺寸大
•       像素密度高---> 屏幕物理像素多--->单个像素的物理尺寸小