【毛豆工具集】【UI】【多设备适配】实现与屏幕密度等倍的图片加载

俩毛豆2026-01-01 12:33

iOS同学，在研发时会使用@2x，@3x来表示对应的屏幕密度下的图片资源，对应的图片资源坐标计算，也是以相对屏幕密度计算之后的取值进行（也就是鸿蒙系统中的vp）。

但是鸿蒙系统中，会存在3.25，3，2.75这种屏幕密度，与官方提供的资源分类方式（如xxldpi、xxxldpi），会存在不对齐的情况（比如，3，2.75这种屏幕密度的设备会优先加载xxldpi限定词中的资源，如果在项目中需要对图片进行像素级的操作，就会产生误差）。

解决上述的问题，可以使用PixelMap，相对于屏幕实际密度对图片进行缩放，这样得出来的图片size就是与当前设备的屏幕密度等倍的图片，像素级的操作即可以在多设备中统一，并没有误差。

代码实现如下：

复制代码

// pixelMap:需要按屏幕密度适配的图片
// oDensity:原图屏幕密度，建议放在默认的资源文件中（非限定词）
function deviceAdaptPic(pixelMap: image.PixelMap, oDensity: number) {
  pixelMap.scaleSync(display.getDefaultDisplaySync().densityPixels / oDensity,
    display.getDefaultDisplaySync().densityPixels / oDensity);
}

代码使用示例：

复制代码

deviceAdaptPic(this.pixelMapScale,4) // 4是原图屏幕密度，建议使用高密度的适配低密度。