一行代码搞定前端可视化大屏自适应,开箱即用 |
您所在的位置:网站首页 › 大屏展示项目是什么 › 一行代码搞定前端可视化大屏自适应,开箱即用 |
github 地址:https://github.com/astak16/adaptorjs npm 地址:https://www.npmjs.com/package/adaptorjs 大屏适配解决方案做可视化大屏时,在适配屏幕上,有四种常用的解决方案: 根据屏幕尺寸随意缩放 适用场景:留白不可接受的情况下使用优点:占满屏幕,美观缺点:屏幕尺寸比和设计稿尺寸比不一致时,导致变形做个多个可视化大屏项目后,我们团队最终选择了第一种方案,也就是随意缩放 因为可视化大屏大部分情况是在大屏幕上显示,比如电视机,显示器等,这些屏幕的分辨率一般都是 16:9 我们的设计稿只需要按照 1920*1080 来设计就可以了 做缩放的技术,主要是 css 的 transform: scale,但是吧它会有 3 个问题: 地图上的点位会出现偏移/点击位置不准使用到 overflow: scroll 的地方,文本可能会出现模糊在使用第三方组件时,比如下拉框等不会缩放为了一劳永逸解决这些问题,决定造个轮子 核心代码屏幕的宽高和设计稿的宽高比例,就是缩放比例,通过设置 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,用于设置缩放类型 使用 安装 npm i adaptive # 或 yarn add adaptive # 或 pnpm i adaptive 引入 import Adaptive from "adaptive"; 快速使用 const adaptive = new Adaptive({ querySelector: "#app" }); 注意事项要在 dom 加载完成后再初始化 react 中使用 useEffect(() => { const adaptive = new Adaptive({ querySelector: "#app" }); return () => { adaptive.destroy(); }; }, []); vue 中使用 let adaptive; onMounted(() => { adaptive = new Adaptive({ querySelector: "#app" }); }); onUnmounted(() => { adaptive.destroy(); }); 参数说明 querySelector: string // 大屏根选择器,必选 extraQuerySelectors?: string[]; // 需要额外缩放的 dom 选择器,可选 designWidth?: number; // 设计稿宽度,可选,默认 1920 designHeight?: number; // 设计稿高度,可选,默认 1080 type?: ScaleType; // 缩放类型,可选,默认 scale 最终实现效果 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |