前端可视化大屏自适应终极解决方案autofit.js

冰眸js 2024-06-14 11:33:02 阅读 63

可视化大屏适配/自适应现状

可视化大屏的适配是一个老生常谈的话题了,现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢?因为目前市面上适配工具每一个都无法做到完美的效果,做出来的东西都差不多,最终实现效果都逃不出白边的手掌心,可以解决白边问题的,要么太过于复杂,要么会影响dom结构。

三大常用方式

vw/vh方案 概述:按照设计稿的尺寸,将px按比例计算转为vw和vh优点:可以动态计算图表的宽高,字体等,灵活性较高,当屏幕比例跟 ui 稿不一致时,不会出现两边留白情况缺点:每个图表都需要单独做字体、间距、位移的适配,比较麻烦scale方案 概述:也是目前效果最好的一个方案优点:代码量少,适配简单 、一次处理后不需要在各个图表中再去单独适配.缺点:留白,有事件热区偏移,下面介绍的autofit.js已经完全解决了此问题rem + vw vh方案 概述:这名字一听就麻烦,具体方法为获得 rem 的基准值 ,动态的计算html根元素的font-size ,图表中通过 vw vh 动态计算字体、间距、位移等优点:布局的自适应代码量少,适配简单缺点:留白,有时图表需要单独适配字体
autofit.js初代核心代码

function keepFit(designWidth, designHeight, renderDom) { let clientHeight = document.documentElement.clientHeight; let clientWidth = document.documentElement.clientWidth; let scale = 1; if (clientWidth / clientHeight < designWidth / designHeight) { scale = (clientWidth / designWidth) document.querySelector(renderDom).style.height = `${clientHeight / scale}px`; } else { scale = (clientHeight / designHeight) document.querySelector(renderDom).style.width = `${clientWidth / scale}px`; } document.querySelector(renderDom).style.transform = `scale(${scale})`;}

这是一款可以使你的项目一键自适应的工具 github源码go

从npm下载

npm i autofit.js

引入

import autofit from 'autofit.js' 快速开始

autofit.init()

默认参数为1920*929(即去掉浏览器头的1080), 直接在大屏启动时调用即可
使用

// App.vue 需要在renderDom挂载到dom之后,才可以生效export default { mounted() { autofit.init({ designHeight: 1080, designWidth: 1920, renderDom:"#app", resize: true }) },}

以上使用的是默认参数,可根据实际情况调整,参数分别为

* - renderDom(可选):渲染的dom,默认是 "#app",必须使用id选择器 * - designWidth(可选):设计稿的宽度,默认是 1920 * - designHeight(可选):设计稿的高度,默认是 929 ,如果项目以全屏展示,则可以设置为1080 * - resize(可选):是否监听resize事件,默认是 true

解决问题

使用了autofit.js依然出现了白边

因为autofit.js使用的是scale方案,transform: scale() 缩放时,dom元素在文档中的实际占位是不变

这样下方就出现了白边,右侧还出现了滚动条

解决此问题将body设置超出隐藏即可:

1

2

3

body{

    overflow: hidden;

}

image-20230509154748146

在设置超出隐藏后,滚动条和白边都不见了。

#app充满了全屏,里面的元素却不能自适应位置。

出现这种问题的原因很明显,你需要将内容元素做一个简单的适配定位,因为autofit.js只做了缩放和填充部分。如果你的页面元素没有做均匀分布的位置,也是会出现这种情况的。

以上图为例

如果出现了这个问题,推荐使用flex进行布局即可。

1

2

display:flex;

justify-content: space-between;

或者直接使用定位,将三块内容定位到左上、中间、右上。

1

2

3

4

5

6

7

8

.left, .right {

    position: fixed;

    width: 25%;

    height: 100%;

    top: 0;

    padding-top: 70px;

    z-index: 9999;

}

手动缩放浏览器窗口时,echarts图表被拉伸了

这个问题按说不会是因为autofit.js引起的(前提是你没有使用百分比),但是既然有人提到了,这里说一下解决办法。

echarts图表拉伸,说明你的echarts外层容器变大或者变小的,导致canvas元素拉伸了,解决办法为:

1

2

3

4

5

6

window.addEventListener('resize', this.redraw, false);   

redraw() {

      this.myChart.clear();

      this.myChart.resize();

      this.draw();

},

像我这样,监听resize事件,并重绘echarts即可。

手动缩放浏览器可以正常适应,点击最大化(或F11全屏)时却失效了

这个问题属于autofit.js的一个bug,目前在最新版本已经修复了。

造成Bug的代码

1

2

3

4

5

6

7

if (clientWidth / clientHeight < designWidth / designHeight) {

  scale = (clientWidth / designWidth)

  document.querySelector(renderDom).style.height = `${clientHeight / scale}px`;

} else {

  scale = (clientHeight / designHeight)

  document.querySelector(renderDom).style.width = `${clientWidth / scale}px`;

}

造成这个bug的原因是,全屏时的宽高比不小于(因为是等于)设计图宽高比,导致高度没有被重新设置。

所以在曾经设置过高度(即基于宽度px不变的缩放),再最大化的情况,高度不会变。在这种逻辑下,宽度有时也会失效。

修改后的代码(1.0.8):

1

2

3

4

let scale = (clientWidth / clientHeight < designWidth / designHeight) ? (clientWidth / designWidth) : (clientHeight / designHeight)

dom.style.height = `${clientHeight / scale}px`;

dom.style.width = `${clientWidth / scale}px`;

dom.style.transform = `scale(${scale})`;

这样无论是怎样的宽高比,它都会同时设置宽度和高度。

使用autofit.js后,在小屏幕上字体(或元素)变得过小

造成这种问题的原因大概率是你同时使用了其他自适应工具,或者使用了相对单位,导致你的网站进行了双重适配。

解决方式也很简单,autofit.js不需要任何其他辅助工具,如果想体验autofit.js一行搞定,关闭其他插件,且不要使用任何相对单位即可!

autofit.js仅推荐使用px进行开发。

使用autofit.js后,地图事件热区偏移了

不要手动设置:transform-origin,因为autofit.js将它设置成了 0 0,即以左上角为基准点缩放,这可以保证dom元素不会偏移。

如果你使用的地图是基于canvas绘制的,那么有可能会出现偏移现象(往往伴随着拉伸),那么和上面的echarts的解决方式一样,只需要重绘就可以了。

如果是基于svg绘制的,那么不应该会出现这个问题。

原生项目或jquery项目引入方式

将准备好的包放在项目中,常规引入方式<script src="assets/autofit/autofit.js"></script>

需要修改autoofit.js文件,将//export { elRectification };

//export default autofit;注释掉,不然报错,当然如果你项目支持import方式可以不用注释掉;

在你的项目js中使用autofit.init()同上 



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。