【HM】UI设计师给的设计稿，标注单位是px，鸿蒙开发者实现页面时需要转换单位原创

与辉鸿蒙

发布于 2024-11-9 18:20

浏览

1收藏

px/vp/fp三者的区别，请查看我之前的帖子：
https://developer.huawei.com/consumer/cn/forum/topic/0203149707348916165?fid=0101587866109860105
UI设计师给的设计稿如下：
【HM】UI设计师给的设计稿，标注单位是px，鸿蒙开发者实现页面时需要转换单位-鸿蒙开发者社区
鸿蒙开发工程师实现页面时，不能直接使用px的数值，大小位置单位应该使用vp，字体大小单位应该使用fp。否则在手机外的其他鸿蒙设备上，页面显示或排版偏差就比较大。为了解决不同单位转换，我写了一个公共类，代码如下：

import { GlobalContext } from './GlobalContext';

let context = getContext(this);
const DESIGN_WIDTH = 360; // 设计稿宽度
const DESIGN_HEIGHT = 780; // 设计稿高度

/**
 * 尺寸适配工具类
 */
export default class SizeUtil {
  /**
   * 尺寸适配
   * @param value 设计稿尺寸
   */
  static adaptSize(value: number): number {
    let deviceDisplay = GlobalContext.getContext().getObject("globalDisplay") as display.Display;
    let widthScale = deviceDisplay.width / DESIGN_WIDTH;
    let virtualHeight = DESIGN_HEIGHT * widthScale;
    let designDim = Math.sqrt(DESIGN_WIDTH * DESIGN_WIDTH + DESIGN_HEIGHT * DESIGN_HEIGHT);
    let virtualDim = Math.sqrt(deviceDisplay.width * deviceDisplay.width + virtualHeight * virtualHeight);
    return virtualDim * value / designDim; // 放缩后长度
  }

  /**
   * 获取px
   * @param value 设计稿尺寸
   */
  static getPx(value: Resource): number {
    console.log("context:", context);
    let beforeVp = context.resourceManager.getNumber(value.id);
    return SizeUtil.adaptSize(beforeVp);
  }

  /**
   * 获取vp
   * @param value 设计稿尺寸
   */
  static getVp(value: Resource): number {
    let beforeVp = context.resourceManager.getNumber(value.id);
    return px2vp(SizeUtil.adaptSize(beforeVp));
  }

  /**
   * 获取fp
   * @param value 设计稿尺寸
   */
  static getFp(value: Resource): number {
    let beforeFp = context.resourceManager.getNumber(value.id);
    return px2fp(SizeUtil.adaptSize(beforeFp));
  }
}


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.

GlobalContext.ets文件代码如下：

 * 全局上下文
 */
export class GlobalContext {
  private constructor() {
  }

  private static instance: GlobalContext;
  private objects = new Map<string, Object>();

  /**
   * 获取全局上下文
   */
  public static getContext(): GlobalContext {
    if (!GlobalContext.instance) {
      GlobalContext.instance = new GlobalContext();
    }
    return GlobalContext.instance;
  }

  /**
   * 获取对象
   */
  getObject(name: string): Object | undefined {
    return this.objects.get(name);
  }

  /**
   * 设置对象
   */
  setObject(key: string, objectClass: Object): void {
    this.objects.set(key, objectClass);
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.