可视化大屏

不同屏幕的自适应

1. 缩放

根据设计时的尺寸，算出不同屏幕的比例，然后整体进行缩放

  // * 以宽度为基准

  function calcRateByWidth(
    baseWidth: number,
    baseHeight: number,
    baseProportion: number
  ) {
    // 表示更高
    const heightRatio = parseFloat(
      (window.innerWidth / baseProportion / baseHeight).toFixed(5)
    );
    const widthRatio = parseFloat((window.innerWidth / baseWidth).toFixed(5));
    return { widthRatio, heightRatio };
  }

  // * 以高度为基准
  function calcRateByHeight(
    baseWidth: number,
    baseHeight: number,
    baseProportion: number
  ) {
    // 表示更宽
    const widthRatio = parseFloat(
      ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
    );
    const heightRatio = parseFloat(
      (window.innerHeight / baseHeight).toFixed(5)
    );
    return { widthRatio, heightRatio };
  }

  

  // * 拉伸
  function calcRateByStretch(baseWidth: number, baseHeight: number) {
    // 表示更高
    const widthRatio = parseFloat((window.innerWidth / baseWidth).toFixed(5));
    const heightRatio = parseFloat(
      (window.innerHeight / baseHeight).toFixed(5)
    );
    return { widthRatio, heightRatio };
  }

  //数据大屏自适应函数
  const handleScreenAuto = () => {
    const designDraftWidth = 1920; //设计稿的宽度
    const designDraftHeight = 1080; //设计稿的高度
    
    // * 需保持的比例
    const baseProportion = parseFloat(
      (designDraftWidth / designDraftHeight).toFixed(5)
    );
    // * 当前屏幕宽高比
    const currentRate = parseFloat(
      (window.innerWidth / window.innerHeight).toFixed(5)
    );
    let scale = {
      widthRatio: 1,
      heightRatio: 1,
    };

    // 比例越大，则越宽，基准值采用高度，计算出宽度
    // 反之，则越高，基准值采用宽度，计算出高度
    scale =
      currentRate > baseProportion
        ? calcRateByHeight(designDraftWidth, designDraftHeight, baseProportion)
        : calcRateByWidth(designDraftWidth, designDraftHeight, baseProportion);
    //缩放比例
    (
      document.querySelector("#screen") as any
    ).style.transform = `scale(${scale.widthRatio}, ${scale.heightRatio}) translate(-50%)`;
  };
  
  //React的生命周期
  useEffect(() => {
    //初始化自适应  ----在刚显示的时候就开始适配一次
    handleScreenAuto();
    //绑定自适应函数   ---防止浏览器栏变化后不再适配
    window.onresize = () => handleScreenAuto();
    //退出大屏后自适应消失   ---这是react的组件销毁生命周期
    return () => {
      window.onresize = null;
    };
  }, []);

.home-visualization {
  height: 100vh;
  width: 100vw;
  overflow: hidden;

  #screen {
    display: inline-block;
    width: 1920px; //设计稿的宽度
    height: 1080px; //设计稿的高度
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    background-image: url(../../assets/images/visualizationBg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    
    ...
    
  }
}