乐趣区

关于可视化:一行代码搞定前端可视化大屏

jiezi

github 地址：https://github.com/astak16/adaptorjs

npm 地址：https://www.npmjs.com/package/adaptorjs

大屏适配解决方案

做可视化大屏时，在适配屏幕上，有四种罕用的解决方案：

  1. 依据屏幕尺寸随便缩放

    • 实用场景：留白不可承受的状况下应用
    • 长处：占满屏幕，好看
    • 毛病：屏幕尺寸比和设计稿尺寸比不统一时，导致变形

  1. 固定大屏头部，内容局部自适应

    • 实用场景：图表变形不可承受的状况下应用
    • 长处：任意缩放，不会变形

    • 毛病：在屏幕尺寸比和设计稿尺寸比不统一适，导致留白多

      • 解决方案：留白局部搁置背景图

  1. 左右图表固定，地图局部自适应

    • 实用场景：地图和图表离开，地图局部占满屏幕，图表局部固定浮在地图下面
    • 长处：占满屏幕，好看

    • 毛病：

        1. 在小屏幕上，地图局部会太小，不够好看
        1. 在小屏幕上，图表的字也会太大，不够好看

  2. 程度缩放，垂直滚动 / 程度滚动，垂直缩放 / 程度滚动、垂直滚动

    • 实用场景：在 pc 上应用，嵌入在其余零碎中，右边（上边）有导航栏
    • 长处：不会缩放
    • 毛病：须要滚动能力看到全部内容

大屏适配技术计划

做个多个可视化大屏我的项目后，咱们团队最终抉择了第一种计划，也就是随便缩放

因为可视化大屏大部分状况是在大屏幕上显示，比方电视机，显示器等，这些屏幕的分辨率个别都是 16:9 咱们的设计稿只须要依照 1920*1080 来设计就能够了

做缩放的技术，次要是 css 的 transform: scale，然而吧它会有 3 个问题：

  1. 地图上的点位会呈现偏移 / 点击地位不准
  2. 应用到 overflow: scroll 的中央，文本可能会呈现含糊
  3. 在应用第三方组件时，比方下拉框等不会缩放

为了一劳永逸解决这些问题，决定造个轮子

外围代码

屏幕的宽高和设计稿的宽高比例，就是缩放比例，通过设置 transform: scale 就能够失去缩放成果 

const realWidth = window.document.body.clientWidth;
const realHeight = window.document.body.clientHeight;
this.pageScale = {
  y: realHeight / designHeight,
  x: realWidth / designWidth,
};
.xxx {transform: scale(${this.pageScale.x}, ${this.pageScale.y});
}

为什么 x 和 y 都要独自设置呢？

反过来想，如果这样设置 transform: scale(scale)，宽高都会缩放，也就变成了整体缩放

这会导致有留白的中央（计划二是用着这种形式）

所以咱们须要独自设置 x 和 y，当某个方向的缩放比不为 1 时，就进行缩放，另一个方向的缩放比能够放弃不变

点位偏移和文本含糊问题

在高清屏（dpr > 2）不会触发（相似 mac 的屏幕就不会有），更多是呈现在一般屏幕上（dpr = 1）

造成这个次要起因是 height * transformY(-50%) 的后果不是整数，为什么会呈现这种景象： 浏览器将图层拆分到 GPU 以进行 3D 转换，非整数的像素偏移，使得 Chrome 在字体渲染的时候，不是那么准确

解决方案：

  • 不应用 transformY(-50%)
  • 在设置 scale 的 dom 上设置：transform-origin: 0 0;

参考链接：疑难杂症：使用 transform 导致文本含糊的景象探索

下拉框不能缩放

第三方组件的下拉框都脱离了文档流，个别都在 body 下，而 body 是不会缩放的

下拉框须要缩放，就须要额定设置

解决方案：

用 MutationObserver 去监听 dom 变动，当 dom 呈现时动静设置 scale

提供参数 extraQuerySelectors，用于设置脱离文档流的 dom

scale/matrix

不同的图表，地图组件应用的缩放可能不一样，有些会用 scale，有些用 matrix

所以进行缩放时，尽量保持一致，防止不必要的 bug

提供参数 scaleType，用于设置缩放类型

应用

  1. 装置 
npm i adaptive
# 或
yarn add adaptive
# 或
pnpm i adaptive
  1. 引入 
import Adaptive from "adaptive";
  1. 疾速应用 
const adaptive = new Adaptive({querySelector: "#app"});

注意事项

要在 dom 加载实现后再初始化

  1. react 中应用 
useEffect(() => {const adaptive = new Adaptive({ querySelector: "#app"});
  return () => {adaptive.destroy();
  };
}, []);
  1. vue 中应用 
let adaptive;
onMounted(() => {adaptive = new Adaptive({ querySelector: "#app"});
});
onUnmounted(() => {adaptive.destroy();
});
  1. 参数阐明 
querySelector: string // 大屏根选择器，必选
extraQuerySelectors?: string[]; // 须要额定缩放的 dom 选择器，可选
designWidth?: number; // 设计稿宽度，可选，默认 1920
designHeight?: number; // 设计稿高度，可选，默认 1080
type?: ScaleType; // 缩放类型，可选，默认 scale

最终实现成果

demo

git clone https://github.com/astak16/adaptorjs.git

cd adaptorjs

pnpm i

pnpm dev
退出移动版