亲宝软件园·资讯

展开

vue数字孪生可视化自适应

YimWu 人气:0

写在前面

前面博主写过一篇文章 面试官:除了 HTTP,你还用过什么通信协议?(Websocket 在数字孪生中的应用),简述了数字孪生产品的数据更新机制,对于数字孪生产品来说,数据非常重要,孪生世界的数据呈现可以反映现实世界的真实情况,而在数据展示中,除了数据更新机制之外,还有一个非常非常重要的东西,那就是可视化表格的展现,而由于数字孪生可视化界面主要用于展示数据,因此在大部分应用场景中,它经常被放到各式各样的展示屏幕展示,可能是普通的电脑屏幕,可能是平板,也有可能是好几块屏幕组成的可视化大屏系统,那么表格的自适应便成了展示的重要衡量标准,如何完成自适应调整,将在产品体验中占据非常重要的比重!

各自适应方案对比

百分比自适应方案

按百分比实现自适应应该是最最简单的方式了,不需要额外增加如何配置,即可实现,我们来做个试验测试一下按百分比实现自适应的效果

<template>
  <div class="box">
    <div class="inner-box">
    </div>
  </div>
</template>
<style lang='scss' scope>
  .box {
    width: 100vw;
    height: 100vh;
    .inner-box {
      width: 20%;
      height: 20%;
      background: cadetblue;
    }
  }
</style>

我们先定义一个外部容器 box ,然后在 box 里创建一个用于自适应的长方形 inner-box,然后将自适应长方形宽和高都设置为20%

我们可以看到,当我们将其宽高都设置为百分比时,window 的宽、高变化时,长方形的宽和高也将随着发生变化,可以实现初步的自适应。

而当我们将这样一个自适应方案应用到数字孪生可视化界面上时,我们会发现,效果有点差强人意

通过我们模拟占位的表格可以很明显看出,当我们对窗口进行横向和竖向的缩放时,左右边的表格是进行了自适应的,而由于在这个自适应方案中宽和高并没有什么联系,导致了宽高各自自适应,最终导致了表格宽高比例严重失衡,展现得非常 ugly,所以,这个方案在数字孪生可视化这个应用场景中并不适合。

Rem + Resize

第二个方案采用的是 rem,而 rem 的原理是根据根元素 fontsize 来计算 rem 的单位长度,那么我们就可以通过监听 window 的 resize,动态修改 fontsize,进而影响 rem,最终达到自适应的效果,下面我们做个测试

// resize.js
const scaleListener = () => {
  window.addEventListener('resize', resize)
  console.log('scaleListening......')
}
const resize = () => {
  // 与原来 1080 的比值
  let scale = window.innerHeight / 1080
  document.documentElement.style.fontSize = `${16 * scale}px` 
  console.log('resize')
}
export {
  scaleListener
}
// APP.vue
<script>
import { scaleListener } from '../src/components/resize/resize';
export default {
  mounted() {
    scaleListener()
  },
}
</script>

首先我们定义了一个 resize 函数用于启动监听 window 的resize 事件,当 window 发生 resize 时,通过与事先定义的标准屏幕高度 1080 对比,计算比值,更新事先定义的标准 fontsize 16px。

这个时候,当我们在组件中使用 rem 作为单位时,随着 window 的 resize,rem 将被重置,元素也将被重置,值得注意的是,这个时候,由于表格的宽高采用的都是 rem ,因此在触发 resize 时,表格的宽高比例不会发生变化,也就达到了数字孪生可视化产品所应具有的自适应标准了

可能大家会有疑问,为啥是监听 height 而不是 width,主要的原因是数字孪生可视化界面一般表格都处于左右两边,宽度变化对于表格并不会造成大的影响,只要表格做到靠左、靠右显示即可,而高度才是影响表格的重要因素,当高度变化时,表格如果不进行缩放,表格的内容将会无法完整显示。

加载全部内容

相关教程
猜你喜欢
用户评论